TNPW1 JavaScript Ing. Jiří Štěpánek
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
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ů
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
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)
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>
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>
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“)
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>
Funkce II <script type=“text/javascript“> function soucet(a, b) { return a+b; } < /script>
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
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>
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"];
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
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’);
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>"); }
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>
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.. http://jquery.com/
Zdroje http://www.w3schools.com/js/default.asp http://www.jakpsatweb.cz/