~~NOCACHE~~ ~~REVEAL theme=dokuwiki&transition=convex&controls=1&show_progress_bar=1&build_all_lists=1&show_image_borders=0&horizontal_slide_level=2&enlarge_vertical_slide_headers=0&show_slide_details=1&open_in_new_window=1&size=1280x960~~ ====== Javascript - Regulární výrazy, Objekty, DOM ====== ===== základy objektově orientovaného programování ===== * JavaScript podporuje tři druhy objektů: objekty definované uživatelem, vestavěné objekty JavaScriptu a objekty prohlížeče. ==== Vytvoření nového objektu ==== * Chceme-li definovat objekt, vytvoříme jej takto: var person = { firstName: "John", lastName: "Doe", age: 50, eyeColor: "blue" }; === Vlastnosti objektu === * k vlastnostem objektu lze přistupovat dvěma způsoby: objectName.propertyName // nebo objectName["propertyName"] ==== Metody ==== * Metodu pro objekt lze definovat přidáním funkce: var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; } } === Přístup k metodě objektu === //objectName.methodName(); name = person.fullName(); ((https://www.w3schools.com/js/js_objects.asp)) ===== Regulární výrazy ===== * posloupnost znaků, které tvoří vyhledávací vzor * slouží pro vyhledávání a nahrazování textu podle obecného vzoru * **syntax** - ''/vzor/modifikátory;'' var patt = /w3schools/i; * **w3schools** - vzor ke hledání * **i** - modifikátor -> vyhledávání nebude casesensitive (nezáleží na velikosti písmen) ==== Metody regulárních výrazů ==== * ''search()'' - najde a vrátí pozici hledaného výrazu * ''replace()'' - najde a nahradí hledaný výraz. var str = "Visit W3Schools"; var n = str.search(/w3schools/i); // výsledek: 6 var str = "Visit Microsoft!"; var res = str.replace(/microsoft/i, "W3Schools"); // Visit W3Schools! ===== BOM (Browser Object Model) ===== ==== Window objekt ====

===== DOM (Document Object Model)===== {{:spse:pm3:pasted:20210112-214521.png?1200|}} ((https://www.w3schools.com/js/js_htmldom.asp)) ----> * JS má naprostou kontrolu nad objekty, které jsou součástí html. * JS může změnit všechny prvky HTML na stránce. * JS může změnit všechny atributy HTML na stránce. * JS může změnit všechny CSS styly na stránce. * JS může odstranit existující prvky a atributy HTML. * JS může přidávat nové prvky a atributy HTML. * JS může reagovat na všechny existující události HTML na stránce. * JS může na stránce vytvářet nové události HTML. <---- ==== DOM metody ==== * ''getElementById'' * ''innerHTML''

----> === Hledání HTML tagů === ^Metoda^Popis^ |document.getElementById(id)|Najde tag podle id| |document.getElementsByTagName(name)|Najde všechny tagy podle nazvu tagu| |document.getElementsByClassName(name)|Vyhledá všechny tagy podle třídy| <---- ----> === Změny HTML tagů === ^Vlastnost^Popis^ |element.innerHTML = new html content|Změni obsah mezi HTML tagy| |element.attribute = new value|Změní hodnotu atributu HTML tagu| |element.style.property = new style|Změní hodnoty v položce style| ^Metoda^Popis^ |element.setAttribute(attribute, value)|Nastavý nový atribut tagu a jeho hodnotu| <---- ----> === Přidat a odebrat html tag === ^Metoda^Popis^ |document.createElement(element)|Vytvoří HTML tag| |document.removeChild(element)|Smaže HTML tag| |document.appendChild(element)|Přidá HTML tag| |document.replaceChild(new, old)|Nahradí HTML tag| |document.write(text)|Zapisuje do výstupního streamu| <---- ==== Animace ====

* https://www.w3schools.com/js/tryit.asp?filename=tryjs_dom_animate_3 ==== Události==== * reaguje na uživatele * https://www.w3schools.com/js/js_htmldom_events.asp ----> === onClick === * JS událost, která se spouští při kliknutí levým tlačítkem myši na určitý element.

Click on this text!

 * https://www.w3schools.com/js/tryit.asp?filename=tryjs_event_onclick2 <---- ----> === onMouseOver / onMouseOut ===
Mouse Over Me
 * https://www.w3schools.com/js/tryit.asp?filename=tryjs_events_mouseover <---- ----> === onMouseDown / onMouseUp ===
Click Me
 * https://www.w3schools.com/js/tryit.asp?filename=tryjs_events_mousedown <---- ----> === onKeyDown === * Při stlačení klávesy ve chvíli, kdy je element aktivní.

A function is triggered when the user is pressing a key in the input field.

 * https://www.w3schools.com/js/tryit.asp?filename=tryjs_events_onkeydown <---- ----> === Další události === https://www.w3schools.com/js/js_events_examples.asp <----