Rozdíly

Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.

--- temata:28-html-a-javascript:main [2011/02/14 23:12]
sgs
+++ temata:28-html-a-javascript:main [2013/05/24 09:14] (aktuální)
sgs [XHTML]
@@ Řádek 1: / Řádek 1: @@
+~~ODT~~
 ====== 28 - HTML a JavaScript ======
@@ Řádek 37: / Řádek 39: @@
 Součástí obsahu elementu mohou být další vnořené elementy.
 **Atributy** jsou doplňující informace, které upřesňují vlastnosti elementu.
+**Validita** znamená jak dokument splňuje pravidla definovaná W3C, neznamená bezproblémové zobrazovaní, vzhledem k různým implementacím.
 HTML obsahuje mimo vlastní definici značkovacího jazyka jako aplikace SGML mnoho dalších formálních jazyků,
@@ Řádek 45: / Řádek 50: @@
 ===== Struktura dokumentu =====
-  * Deklarace DTD – je povinná až ve verzi 4.01, je uvedena direktivou <!DOCTYPE.
+  * Deklarace DTD – je povinná až ve verzi 4.01, je uvedena direktivou <!DOCTYPE. - říká jakou verzí jazyka je dokument psán
   * Kořenový element – element html (značky <html> a </html>) reprezentuje celý dokument, vše je uvnitř.
   * Hlavička elementu – obsahuje metadata (ne obsah), která se vztahují k celému dokumentu. Definují např. název dokumentu, jazyk, kódování, klíčová slova, přiložené soubory (styly, javascript,...). Je uzavřena mezi značky <head> a </head>.
   * Tělo dokumentu – obsahuje vlastní text dokumentu. Vymezuje se značkami <body> a </body> = to co je vidět.
-== Druhy značek ==
+==== Druhy značek ====
   * Strukturální značky – rozvrhují strukturu dokumentu, příkladem jsou odstavce (<p>), nadpisy (<h1>, <h2>). Dodávají dokumentu formu.
   * Popisné (sémantické) značky – popisují povahu obsahu elementu, příkladem je nadpis (<title>) nebo adresa (<address>). Současný trend je orientován právě na sémantické značky, které usnadňují automatizované zpracovávání dokumentů a vyhledávání informací v záplavě dokumentů na webu.
   * Stylistické značky – určují vzhled elementu při zobrazení, typickým příkladem je značka pro tučné písmo (<b>). Od tohoto druhu značek se postupně upouští, trendem je používání kaskádových stylů, které vzhled popisují odděleně od obsahu dokumentu.
+===== XHTML =====
+Postupem, času vniklo XHTML, které je validní dle deifnice XML. Má striktnější pravidla, např, všechny značky musí být ukončeny atd.
+Hlavní motto je oddělit vzhled od dat, což se docílí použítím CSS. Jě nekolik typů: Strict, Transitional,...
+  * Dokument musí začínat XML deklarací
+  * Všechny tagy malým písmem
+  * Hodnoty atributů musí být v uvozovkách
+  * Musíme posílat jiné Mime než u HTML
+===== CSS =====
+Cascading Style Sheets. Něco málo o CSS pro úplnost.
+Slouží k tvorbě šablon pro dokumenty, zde jsou uloženy definice. Definujeme většinou jejich vzhled, velikosti písma, barvy, odstupy.
+Máme tak pěkně externě uložené definice které můžeme obecně použít pro mnoho dokumentů a máme zachováno stejné formátování.
+Možnost vložení do dokumentu, stejně jako JS viz konec.
+I zde platí problém různé implementace u různých prohlížečů, nutné testovat ve všem.
+===== JavaScript =====
+JavaScript je interpretovaný programovací jazyk s objektově orientovanou koncepcí. Klientská verze tohoto jazyka je součástí většiny všeobecně rozšířených prohlížečů. První verze od firmy Netscape. Běží na straně klienta, ne serveru.
+Jádro jazyka (tj. část univerzální nezávislá od prohlížečů) je syntakticky velmi podobná C++.
+Podobnost však končí na úrovni syntaxe. **Nemá nic společného s javou**.
+Přebírá mnoho z jazyka Perl, např. regulární výrazy či práci s polem.
+**Vlastnosti**
+  * interpretovaný jazyk s objektově orientovanou koncepcí – nemusí se kompilovat
+  * objektový – využívá objektů prohlížeče a zabudovaných objektů
+  * závislý na prohlížeči – funguje ale ve většině prohlížečů
+  * klientská verze u většiny internetových prohlížečů
+  * syntakticky podobný C, C++ nebo Javě
+  * má potlačenu typovou kontrolu
+  * univerzální část JavaScriptu se vžil název jádro JavaScriptu
+** Identifikátory a klíčová slova:**
+  * case-sensitive
+  * písmena anglické abecedy, podtržítko a dolar
+  * dále i číslice
+**Omezení:**
+  * uživatel může JavaScript zakázat
+  * existují různé odlišné verze jazyka i prohlížečů, což vede k častým chybám, je těžké zajistit stejnou funkčnost všude
+  * neumí přistupovat k lokalním ani serverovým souborům (kromě cookies - lokální) ani k žádným jiným systémovým zdrojům (tiskárna např.)
+  * neumí žádná data uložit (kromě cookies)
+**Cookies**
+Umožnuje uložit data k uživateli, můžou se opět použít při přístí návštěvě. Uživatel může zakázat. Mají nastavitelnou dobu expirace, je omezena jejich delka i jejich počet.
+**Příkazy jazyka**
+Obecně pro řízení stejné jako v C++ - cykly, podmínky, switche, bloky, break, continue, vyjímky, with, návěstí
+==== Objektový model ====
+JavaScript je objektový jazyk. V praxi často znamená „objektovost“ JavaScriptu vlastně jenom to, že všechny vlastnosti a příkazy jsou uspořádány podle nějakého systému. Objektový model je způsob, jak pojmenovat jednotlivé prvky okna prohlížeče a dokumentu, aby se s nimi dalo pracovat. Studium JavaScriptu je vlastně studium objektového modelu prohlížeče a dokumentu; je třeba se naučit, jak se které prvky zapisují.
+  * javaScript je objektove orientovany a to včetně jednoduché dědičnosti
+  * neexistují třídy jako u ostatních ovšem existuji Konstruktory
+  * konstruktor je definovan jinym a to Function (cili jsou to funkce)
+  * základní konstruktor Object – vse je z něj děděno
+**Javascript umí přistupovat:**
+  * k objektům okna prohlížeče (objekt window)
+  * a přes něj i k prvkům stránky (window.document), které mají úzkou vazbu na jazyk HTML
+  * k zabudovaným objektům (Date, Math, string).
+  * k vytvořeným objektům
+Objekty jsou vlastně asociativní pole. - obj.x = 10 a obj["x"] = 10 je to stejné.
+**Prototypy**
+Přestože JavaScript nedisponuje klasickým konceptem třída-instance, typickým pro objektově orientované jazyky, disponuje rysem, který tento mechanismus částečně nahrazuje – prototypováním. Díky prototypování je dále JavaScript schopen simulovat mnoho principů a vlastností třídově založených mechanismů, například dědičnost, která je u JavaScriptu nazývána právě jako dedičnost prototypová, která je vysvětlena na příkladu níže.
+**Funkce jako konstruktory objektů**
+Funkce tedy mají v JavaScriptu kromě své běžné role význam jako konstruktory objektů. Voláním konstruktoru pomocí operátoru new se pak vytvoří nový objekt (instance). Vlastnost objektu se deklaruje přes klíčové slovo this. Přímo při vytváření objektu lze tedy přejímáním parametrů volaného konstruktoru inicializovat jednotlivé proměnné. Atribut prototype dané funkce potom určuje prototyp nové vytvořeného objektu. Příklad konstruktoru třídy auto:
+<code>
+// Definice konstruktoru
+function auto(znacka, spz) {
+ this.znacka = znacka;
+ this.spz = spz;
+ this.vypisZnacku = function(){alert(this.znacka); };
+}
+//vytvoření nového auta
+var moje_auto = new auto("mercedes", "3A4983");
+</code>
+Ohledně toho prototypování je to složitější (jak fungují metody, dedičnost, jedna původní třida atd), nedá se to přirovnat k žádnýmu jazyku se kterým jsme ve škole pracovali, dalo by se to tu hodně rozepsat, ale nemyslim si, že to je potřeba.
+====Klientský JavaScript====
+Pojem klientský JavaScript vznikne integrací JavaScriptu do internetového prohlížeče. Klientský JavaScript používá kromě univerzálních rysů jazyka i objektový model dokumentů DOM. Jejich spojením lze dosáhnout dynamického chování webových stránek, pro něž se vžil název Dynamic HTML (DHTML).
+Organizace Word Web Consorcium ( http://www.w3c.org ) publikovala specifikaci DOM, kterou by měly webové prohlížeče ctít. Bohužel tomu dosud tak není a programování produktů v klientském JavaScriptu je často problematické z důvodů několika větví programu vhodných pro různé prohlížeče.
+Kromě využití klientského JavaScriptu lze jádro jazyka obohacené o další knihovny (zejména pro práci se
+soubory) používat i mimo prohlížeče, např. formou tzv. Scrip Hostingu.
+Vlastnosti:
+  * integrace JavaScriptu do internetového prohlížeče
+  * kromě univerzálních rysů jazyka i objektový model dokumentů DOM
+  * lze dosáhnout dynamického chování webových stránek, pro něž se vžil název Dynamic HTML (DHTML)
+  * Word Web Consorcium (http://www.w3c.org/DOM) publikovala specifikaci DOM
+  * kromě využití klientského JavaScriptu lze jádro jazyka obohacené o další knihovny (zejména pro práci se soubory) používat i mimo prohlížeče, např. formou tzv. Script Hostingu.
+Klientský JavaScript je provozován v prostředí webového prohlížeče. Oproti jádru jazyka využívá následujících
+styčných bodů s prohlížečem:
+  * globálním objektem je okno prohlížeče Window
+  * je k dispozici model dokumentu document stránky ve struktuře DOM.
+  * prohlížeč generuje události, které indikují chování okna, případně aktivity uživatele a mohou řídit vykonávání programů v JavaScriptu.
+**Window jako globální objekt**
+V klientském JavaScriptu je globálním objektem okno prohlížeče nazvané Window. Lze se na něj odkázat jménem window. Všechny globálně deklarované proměnné jsou proměnnými okna window. Jsou zde uvedeny pouze vlastnosti s odkazovanými typy. Většina objektů má mnohem více vlastností různých hodnotových typů. Nejpoužívanější je pravděpodobně objekt document. Tvoří podstrom objektů, které jsou dlouhodobě předmětem pokusů o standardizaci. V současnosti je již používána plně objektová verze DOM.
+**DOM**
+Znamená Document Object Model a umožnuje procházet dokument jako objekt. Jednotlivé zanoření elementů jsou další a další vnitřní objekty. Obsahy elementu, jejich atributy atd jsou atributy těchto objektů.
+**Model programování řízený událostmi**
+Aby se začal provádět nějaký kód javascriptu, musí být spušten nějakou událostí. Mohou to být stisky kláves, pohyby myší atd, anebo obecně nahrání stránky na začátku prohlížení. Budeme programovat a registrovat u systému ovládače těchto událostí. Registrací událostí rozumíme začlenění ovládačů do modelu zobrazené stránky.
+<code>
+<span onClick="my_fce(10);">Textovy obsah elementu</span>
+</code>
+**Události**
+  * onClick - kliknutí
+  * onMouseOver - najeti kurzorem myši
+  * onMouseOut - odjetí kurzorem myši
+  * onLoad - nahráni stránky
+... a další , cca 20
+==== Vkládání JavaScriptu do HTML ====
+Programy v JavaScriptu je třeba nějak spojit s programy v HTML. Existuje pro to několik způsobů:
+  * přímé vložení programu mezi dvojici značek <script> a </script>.
+  * připojení externího souboru pomocí atributu src značky <script> - nejčastěji.
+  * přímé vložení do programu v HTML, kde je ovládač zadaný jako hodnota nějakého atributu, např. onclick nebo onmouseover  - jen pro maličkosti.
+  * jako tělo adresy URL, která používá speciální protokol javascript:
+====AJAX====
+Ještě něco málo o AJAXu - zkratka pro Asynchronous JavaScipt And XML. Umožnuje komunikovat se serverem bez nutnosti nahrávat celou stránku znova.
+Celá komunikace je obstarávána objektem XMLHTTPRequest, kterým se vyšle požadavek na server, a ten může vrácet data v Simple Text, XML, JSON atd.
+Jde o asynchronní komunikaci, tzn. pokračuje se dál a nečeká se na odpověd od serveru.
+{{tag>internet}}

temata/28-html-a-javascript/main.1297721564.txt.gz · Poslední úprava: 2011/02/14 23:12 autor: sgs

Zobrazit stránku Starší verze

Zpětné odkazy Nahoru