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

Obě strany předchozí revize Předchozí verze
Následující verze		 Předchozí verze
spse:pm3:javascript-2 [2021/01/12 21:35] – 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 17: Řádek 21:
  </code>  </code>
 </fragment-block> </fragment-block>
 +<fragment-block>
 === Vlastnosti objektu === === Vlastnosti objektu ===
 +</fragment-block>
   * k vlastnostem objektu lze přistupovat dvěma způsoby:   * k vlastnostem objektu lze přistupovat dvěma způsoby:
  
Řádek 34: Řádek 39:
 ==== Metody ==== ==== Metody ====
   * Metodu pro objekt lze definovat přidáním funkce:   * Metodu pro objekt lze definovat přidáním funkce:
 +<fragment-block>
 <code javascript> <code javascript>
 var person = { var person = {
Řádek 44: Řádek 50:
 } }
 </code> </code>
 +</fragment-block>
 +<fragment-block>
 === Přístup k metodě objektu === === Přístup k metodě objektu ===
 +</fragment-block>
 <fragment-block> <fragment-block>
 <code javascript> <code javascript>
Řádek 58: Řádek 66:
   * posloupnost znaků, které tvoří vyhledávací vzor   * posloupnost znaků, které tvoří vyhledávací vzor
   * slouží pro vyhledávání a nahrazování textu podle obecného vzoru   * slouží pro vyhledávání a nahrazování textu podle obecného vzoru
-  * **syntax** - ''/vzor/modifikátory;+  * **syntax** - ''/vzor/modifikátory;''
 <fragment-block> <fragment-block>
 <code javascript> <code javascript>
Řádek 64: Řádek 72:
 </code> </code>
 </fragment-block> </fragment-block>
-  * w3schools - vzor ke hledání+  * **w3schools** - vzor ke hledání
   * **i** - modifikátor -> vyhledávání nebude casesensitive (nezáleží na velikosti písmen)   * **i** - modifikátor -> vyhledávání nebude casesensitive (nezáleží na velikosti písmen)
 ==== Metody regulárních výrazů ==== ==== Metody regulárních výrazů ====
Řádek 88: Řádek 96:
  
  
-===== BOM =====+===== BOM (Browser Object Model) =====
 ==== Window objekt ==== ==== Window objekt ====
  
Řádek 107: Řádek 115:
  
  
-===== DOM =====+===== 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
  
-===== integrace v HTML ===== +<----
-===== objekty Window, Screen, Navigator, Location, History ===== +
-=====objekt Document – obrázky, odkazy, záložky ===== +
-===== formuláře a jejich prvky ===== +
-====== DOM ====== +
-====== Ovládání CSS pomocí scriptů ====== +
-======Ovladače událostí ====== +
-====== Praktické příklady====== +
  • spse/pm3/javascript-2.1610487345.txt.gz
  • Poslední úprava: 2024/07/07 16:48
  • (upraveno mimo DokuWiki)