Stáhnout prezentaci
Prezentace se nahrává, počkejte prosím
1
TNPW1 JavaScript Ing. Jiří Štěpánek
2
Javascript – programovací jazyk
Objektově orientovaný Fungují zde základní premisy OOP Multiplatformní Funguje na každé platformě / OS Interpretovaný Zdrojový kód JS přeloží prohlížeč řádek po řádku a vykonává Vkládaný do html stránek Funkční kód prováděn v rámci prohlížeče na straně klienta
3
Možnosti využití Přímý zápis do HTML dokumentu
Reakce na události na stránce Změna HTML obsahu Změna kaskádových stylů / tříd přiřazených určitému elementu Validace uživatelských vstupů
4
DOM Document Object Model
Objektově orientovaná reprezentace XML nebo HTML dokumentu DOM je API (Application Programming Interface), které umožňuje přístup k obsahu, modifikaci obsahu nebo struktury dokumentu nebo jeho částí. Reprezentace HTML dokumentu jako stromové struktury Javascript přistupuje k HTML dokumentu pomocí DOM
5
Deklarace JS bloku <script type=“text/javascript“> alert("Text upozornění"); < /script> Může být v hlavičce nebo těle stránky (i na obou místech) Lze definovat libovolný počet bloků Lze definovat externí zdroj javascriptu atributem src v tagu script (typicky přípona .js)
6
Proměnné <script type=“text/javascript“> var cislo = 1;
Proměnné jsou netypové – při deklaraci není znám typ (číslo, řetězec znaků, … ) <script type=“text/javascript“> var cislo = 1; var text = “ahoj“; // komentář // proměnná delka má hodnotu 4 var delka = text.length; < /script>
7
Příklad – zápis do html výstupu
<!DOCTYPE html> <html> < body> <script type=“text/javascript“> document.write("<h1>Nadpis</h1>"); document.write("<p>Odstavec</p>"); < /script> < /body> < /html>
8
Přístup k HTML objektům
K dispozici objekt document getElementById(id) Vrátí element podle zadaného Id, pokud neexistuje vrátí null getElementsByTagName(tagName) Vrátí pole elementů které mají tag tagName (takže např. všechny odstavce, pokud tagName = „p“)
9
Funkce Deklarovaná část kódu, která může přijímat parametry, vracet výstupní hodnotu a je volána z jiné části kódu <script type="text/javascript"> function myFunction() { document.getElementById("mujDiv").in nerHTML="Text vypsaný javascriptem"; } < /script>
10
Funkce II <script type=“text/javascript“> function soucet(a, b) { return a+b; } < /script>
11
Události Na události, které nastanou ve stránce je možné programově reagovat javascriptem Kliknutí Dvojité kliknutí Pohyb myši (kurzoru) Ukázání kurzorem na element Načtení dokumentu Odeslání formuláře
12
Události - příklad <!DOCTYPE html> <html> <body> <h1>My Web Page</h1> <p id="demo">A Paragraph</p> <input type="button" onclick="myFunction()">Try it</button> <script> function myFunction() { alert(“stisknuto tlacitko“) } < /script> </body> < /html>
13
Pole var cars=new Array(); cars[0]="Saab"; cars[1]="Volvo"; cars[2]="BMW"; var cars=new Array("Saab","Volvo","BMW"); var cars=["Saab","Volvo","BMW"];
14
Objekty var person={ firstname : "John", lastname : "Doe", id : 5566 }; // person je objekt, k přístupu k atomickým vlastnostem objektu využijeme operátor . var idOsoby = person.id; // 5566
15
Podmínky var x = 10; if(x < 5) { alert(’x je mensi nez 5’); } else if(x < 10) alert(‘x je mensi nez 10’); else alert(’x neni mensi nez 10’);
16
Cykly For Předem daný počet iterací, iterační proměnná, testování podmínky While Pouze testování podmínky for (var i=0;i<cars.length;i++) { document.write(cars[i] + "<br>"); }
17
Validace vstupních polí
function validateForm() { var x=document.forms["myForm"]["fname"].value; if (x==null || x=="") { alert("First name must be filled out"); return false; } } return validateForm() v onsubmit vrátí buď true nebo false. V případě false nedojde k odeslání formuláře <form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post"> First name: <input type="text" name="fname"> < input type="submit" value="Submit"> < /form>
18
jQuery Javascriptová knihovna ulehčující práci s DOM
Principem je dotazování na DOM a manipulace s elementy V současnosti často používaný Umožňuje pohodlnou práci s výběrem elementů, přiřazování událostí, animace, asynchronní požadavky atd..
19
Zdroje http://www.w3schools.com/js/default.asp
Podobné prezentace
