spse:pm3:javascript-2

Rozdíly

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

Odkaz na výstup diff

Následující verze		 Předchozí verze
spse:pm3:javascript-2 [2021/01/12 20:25] – vytvořeno jendaspse:pm3:javascript-2 [2024/07/07 16:48] (aktuální) – upraveno mimo DokuWiki 127.0.0.1
Řádek 1: Řádek 1:
-====== Javascript - Pole, Regulární výrazy, Objekty, DOM ======+~~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í ===== ===== základy objektově orientovaného programování =====
Řádek 6: Řádek 10:
 ==== Vytvoření nového objektu ==== ==== Vytvoření nového objektu ====
  
-  * Chceme-li definovat objekt, vytvoříme nejprve funkci, která bude specifikovat jeho jméno, vlastnosti a metody.  +  * Chceme-li definovat objekt, vytvoříme jej takto: 
-  * Například předpokládejme, že chceme vytvořit objekt pro auta. Chceme, aby se tento typ objektu jmenoval auto a jeho vlastnosti byly znacka, model, rokVyroby a barva. Vytvoříme následující funkci: +<fragment-block>
 <code javascript> <code javascript>
-     function auto(znacka, model, rokVyroby) { +var person = { 
-       this.znacka = znacka; +  firstName: "John", 
-       this.model = model; +  lastName: "Doe", 
-       this.rokVyroby = rokVyroby; +  age: 50, 
-     }+  eyeColor: "blue" 
 +};
  </code>  </code>
 +</fragment-block>
 +<fragment-block>
 +=== Vlastnosti objektu ===
 +</fragment-block>
 +  * k vlastnostem objektu lze přistupovat dvěma způsoby:
  
-Nyní můžete vytvořit objekt nazvaný mojeAuto:+<fragment-block>
 <code javascript> <code javascript>
-     mojeAuto = new auto("Škoda", "Felicia LXi", 1995);+objectName.propertyName 
 +// nebo 
 +objectName["propertyName"]
 </code> </code>
 +</fragment-block>
 +
 +
 +
 +
 +==== Metody ====
 +  * Metodu pro objekt lze definovat přidáním funkce:
 +<fragment-block>
 +<code javascript>
 +var person = {
 +  firstName: "John",
 +  lastName : "Doe",
 +  id       : 5566,
 +  fullName : function() {
 +    return this.firstName + " " + this.lastName;
 +  }
 +}
 +</code>
 +</fragment-block>
 +<fragment-block>
 +=== Přístup k metodě objektu ===
 +</fragment-block>
 +<fragment-block>
 +<code javascript>
 +//objectName.methodName();
 +name = person.fullName();
 +</code>
 +</fragment-block>
 +((https://www.w3schools.com/js/js_objects.asp))
  
  
 ===== Regulární výrazy ===== ===== Regulární výrazy =====
-====== JavaScript v prohlížeči ====== +  * posloupnost znaků, které tvoří vyhledávací vzor 
-===== integrace v HTML ===== +  * slouží pro vyhledávání a nahrazování textu podle obecného vzoru 
-===== objekty Window, Screen, Navigator, Location, History ===== +  * **syntax** - ''/vzor/modifikátory;'' 
-=====objekt Document – obrázky, odkazy, záložky ===== +<fragment-block> 
-===== formuláře a jejich prvky ===== +<code javascript> 
-====== DOM ====== +var patt = /w3schools/i; 
-====== Ovládání CSS pomocí scriptů ====== +</code> 
-======Ovladače událostí ====== +</fragment-block> 
-====== Praktické příklady====== +  * **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. 
 + 
 +<fragment-block> 
 +<code javascript> 
 +var str = "Visit W3Schools"; 
 +var n = str.search(/w3schools/i); 
 +// výsledek: 6 
 +</code> 
 +</fragment-block> 
 + 
 +<fragment-block> 
 +<code javascript> 
 +var str = "Visit Microsoft!"; 
 +var res = str.replace(/microsoft/i, "W3Schools"); 
 +// Visit W3Schools! 
 +</code> 
 +</fragment-block> 
 + 
 + 
 +===== BOM (Browser Object Model) ===== 
 +==== Window objekt ==== 
 + 
 +<fragment-block> 
 +<code javascript> 
 +<!DOCTYPE html><html><body><p id="demo"></p><script> 
 + 
 +var w = window.innerWidth; 
 +var h = window.innerHeight; 
 +var x = document.getElementById("demo"); 
 +x.innerHTML = "Browser inner window width: " + w + ", height: " + h + "."; 
 + 
 +</script></body></html> 
 +</code> 
 +</fragment-block> 
 + 
 + 
 + 
 + 
 +===== 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'' 
 + 
 +<fragment-block> 
 +<code html> 
 +<html><body> 
 +<p id="demo"></p> 
 +<script> 
 +document.getElementById("demo").innerHTML = "Hello World!"; 
 +</script> 
 +</body></html> 
 +</code> 
 +</fragment-block> 
 + 
 +----> 
 +=== 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 ==== 
 +<fragment-block> 
 +<code html> 
 +<!DOCTYPE html> 
 +<html> 
 +<style> 
 +#container { 
 +  width: 400px; 
 +  height: 400px; 
 +  position: relative; 
 +  background: yellow; 
 +} 
 +#animate { 
 +  width: 50px; 
 +  height: 50px; 
 +  position: absolute; 
 +  background-color: red; 
 +} 
 +</style> 
 +<body> 
 + 
 +<p><button onclick="myMove()">Click Me</button></p>  
 + 
 +<div id ="container"> 
 +  <div id ="animate"></div> 
 +</div> 
 + 
 +<script> 
 +function myMove() { 
 +  var elem = document.getElementById("animate");    
 +  var pos = 0; 
 +  var id = setInterval(frame, 5); 
 +  function frame() { 
 +    if (pos == 350) { 
 +      clearInterval(id); 
 +    } else { 
 +      pos++;  
 +      elem.style.top = pos + "px";  
 +      elem.style.left = pos + "px";  
 +    } 
 +  } 
 +} 
 +</script> 
 + 
 +</body> 
 +</html> 
 + 
 +</code> 
 +</fragment-block> 
 +  * 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.  
 +<fragment-block> 
 +<code html> 
 +<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1> 
 +</code> 
 +</fragment-block> 
 +  * https://www.w3schools.com/js/tryit.asp?filename=tryjs_event_onclick2 
 + 
 +<fragment-block> 
 +<code javascript> 
 +<script> 
 +document.getElementById("myBtn").onclick = displayDate; 
 +</script> 
 +</code> 
 +</fragment-block> 
 +<---- 
 +----> 
 +=== onMouseOver / onMouseOut === 
 + 
 +<fragment-block> 
 +<code html> 
 +<div onmouseover="mOver(this)" onmouseout="mOut(this)"  
 +style="background-color:#D94A38;width:120px;height:20px;padding:40px;"> 
 +Mouse Over Me</div> 
 + 
 +<script> 
 +function mOver(obj) { 
 +  obj.innerHTML = "Thank You" 
 +} 
 + 
 +function mOut(obj) { 
 +  obj.innerHTML = "Mouse Over Me" 
 +} 
 +</script> 
 +</code> 
 +</fragment-block> 
 +  * https://www.w3schools.com/js/tryit.asp?filename=tryjs_events_mouseover 
 +<---- 
 +----> 
 +=== onMouseDown / onMouseUp === 
 + 
 +<fragment-block> 
 +<code html> 
 +<div onmousedown="mDown(this)" onmouseup="mUp(this)" 
 +style="background-color:#D94A38;width:90px;height:20px;padding:40px;"> 
 +Click Me</div> 
 + 
 +<script> 
 +function mDown(obj) { 
 +  obj.style.backgroundColor = "#1ec5e5"; 
 +  obj.innerHTML = "Release Me"; 
 +} 
 + 
 +function mUp(obj) { 
 +  obj.style.backgroundColor="#D94A38"; 
 +  obj.innerHTML="Thank You"; 
 +} 
 +</script> 
 +</code> 
 +</fragment-block> 
 +   * 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í. 
 + 
 +<fragment-block> 
 +<code javascript> 
 +<head> 
 +<script> 
 +function myFunction() { 
 +  alert("You pressed a key inside the input field"); 
 +} 
 +</script> 
 +</head> 
 +<body> 
 + 
 +<p>A function is triggered when the user is pressing a key in the input field.</p> 
 + 
 +<input type="text" onkeydown="myFunction()"> 
 + 
 +</body> 
 +</code> 
 +</fragment-block> 
 +  * https://www.w3schools.com/js/tryit.asp?filename=tryjs_events_onkeydown 
 +<---- 
 +----> 
 +=== Další události  === 
 + 
 +https://www.w3schools.com/js/js_events_examples.asp 
 + 
 +<----
  • spse/pm3/javascript-2.1610483151.txt.gz
  • Poslední úprava: 2024/07/07 16:48
  • (upraveno mimo DokuWiki)