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 22:48] – jendaspse:pm3:javascript-2 [2024/07/07 16:48] (aktuální) – upraveno mimo DokuWiki 127.0.0.1
Řádek 21: Řá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 38: Řá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 48: Řá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 68: Řá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 92: Řádek 96:
  
  
-===== BOM =====+===== BOM (Browser Object Model) =====
 ==== Window objekt ==== ==== Window objekt ====
  
Řádek 113: Řádek 117:
 ===== DOM (Document Object Model)===== ===== DOM (Document Object Model)=====
  
-{{:spse:pm3:pasted:20210112-214521.png}}+{{:spse:pm3:pasted:20210112-214521.png?1200|}}
 ((https://www.w3schools.com/js/js_htmldom.asp)) ((https://www.w3schools.com/js/js_htmldom.asp))
 +---->
   * JS má naprostou kontrolu nad objekty, které jsou součástí html.   * 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 prvky HTML na stránce.
Řádek 124: Řádek 128:
     * JS může reagovat na všechny existující události HTML na stránce.     * 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.     * JS může na stránce vytvářet nové události HTML.
 +<----
  
 ==== DOM metody ==== ==== DOM metody ====
Řádek 132: Řádek 136:
 <fragment-block> <fragment-block>
 <code html> <code html>
-<html> +<html><body>
-<body> +
 <p id="demo"></p> <p id="demo"></p>
- 
 <script> <script>
 document.getElementById("demo").innerHTML = "Hello World!"; document.getElementById("demo").innerHTML = "Hello World!";
 </script> </script>
- +</body></html>
-</body> +
-</html>+
 </code> </code>
 </fragment-block> </fragment-block>
  
 +---->
 === Hledání HTML tagů === === Hledání HTML tagů ===
 ^Metoda^Popis^ ^Metoda^Popis^
Řádek 151: Řádek 151:
 |document.getElementsByTagName(name)|Najde všechny tagy podle nazvu tagu| |document.getElementsByTagName(name)|Najde všechny tagy podle nazvu tagu|
 |document.getElementsByClassName(name)|Vyhledá všechny tagy podle třídy| |document.getElementsByClassName(name)|Vyhledá všechny tagy podle třídy|
 +<----
  
 +---->
 === Změny HTML tagů === === Změny HTML tagů ===
 ^Vlastnost^Popis^ ^Vlastnost^Popis^
Řádek 161: Řádek 162:
 ^Metoda^Popis^ ^Metoda^Popis^
 |element.setAttribute(attribute, value)|Nastavý nový atribut tagu a jeho hodnotu| |element.setAttribute(attribute, value)|Nastavý nový atribut tagu a jeho hodnotu|
- +<---- 
 +---->
 === Přidat a odebrat html tag === === Přidat a odebrat html tag ===
 ^Metoda^Popis^ ^Metoda^Popis^
Řádek 170: Řádek 171:
 |document.replaceChild(new, old)|Nahradí HTML tag| |document.replaceChild(new, old)|Nahradí HTML tag|
 |document.write(text)|Zapisuje do výstupního streamu| |document.write(text)|Zapisuje do výstupního streamu|
 +<----
  
 ==== Animace ==== ==== Animace ====
- 
- 
 <fragment-block> <fragment-block>
 <code html> <code html>
 +<!DOCTYPE html>
 <html> <html>
 +<style>
 +#container {
 +  width: 400px;
 +  height: 400px;
 +  position: relative;
 +  background: yellow;
 +}
 +#animate {
 +  width: 50px;
 +  height: 50px;
 +  position: absolute;
 +  background-color: red;
 +}
 +</style>
 <body> <body>
  
-<p id="demo"></p>+<p><button onclick="myMove()">Click Me</button></p>  
 + 
 +<div id ="container"> 
 +  <div id ="animate"></div> 
 +</div>
  
 <script> <script>
-document.getElementById("demo").innerHTML = "Hello World!";+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> </script>
  
 </body> </body>
 </html> </html>
 +
 </code> </code>
 </fragment-block> </fragment-block>
-https://www.w3schools.com/js/tryit.asp?filename=tryjs_dom_animate_3+  * https://www.w3schools.com/js/tryit.asp?filename=tryjs_dom_animate_3
  
 ==== Události==== ==== Události====
   * reaguje na uživatele   * reaguje na uživatele
   * https://www.w3schools.com/js/js_htmldom_events.asp   * https://www.w3schools.com/js/js_htmldom_events.asp
 +
 +---->
 === onClick === === onClick ===
   * JS událost, která se spouští při kliknutí levým tlačítkem myši na určitý element.    * JS událost, která se spouští při kliknutí levým tlačítkem myši na určitý element. 
Řádek 203: Řádek 237:
 </fragment-block> </fragment-block>
   * https://www.w3schools.com/js/tryit.asp?filename=tryjs_event_onclick2   * https://www.w3schools.com/js/tryit.asp?filename=tryjs_event_onclick2
- 
  
 <fragment-block> <fragment-block>
Řádek 212: Řádek 245:
 </code> </code>
 </fragment-block> </fragment-block>
- +<---- 
 +---->
 === onMouseOver / onMouseOut === === onMouseOver / onMouseOut ===
  
 <fragment-block> <fragment-block>
-<code javascript>+<code html>
 <div onmouseover="mOver(this)" onmouseout="mOut(this)"  <div onmouseover="mOver(this)" onmouseout="mOut(this)" 
 style="background-color:#D94A38;width:120px;height:20px;padding:40px;"> style="background-color:#D94A38;width:120px;height:20px;padding:40px;">
Řádek 234: Řádek 267:
 </fragment-block> </fragment-block>
   * https://www.w3schools.com/js/tryit.asp?filename=tryjs_events_mouseover   * https://www.w3schools.com/js/tryit.asp?filename=tryjs_events_mouseover
 +<---- 
 +---->
 === onMouseDown / onMouseUp === === onMouseDown / onMouseUp ===
  
 <fragment-block> <fragment-block>
-<code javascript>+<code html>
 <div onmousedown="mDown(this)" onmouseup="mUp(this)" <div onmousedown="mDown(this)" onmouseup="mUp(this)"
 style="background-color:#D94A38;width:90px;height:20px;padding:40px;"> style="background-color:#D94A38;width:90px;height:20px;padding:40px;">
Řádek 257: Řádek 291:
 </fragment-block> </fragment-block>
    * https://www.w3schools.com/js/tryit.asp?filename=tryjs_events_mousedown    * https://www.w3schools.com/js/tryit.asp?filename=tryjs_events_mousedown
 +<---- 
 +---->
 === onKeyDown === === onKeyDown ===
   * Při stlačení klávesy ve chvíli, kdy je element aktivní.   * Při stlačení klávesy ve chvíli, kdy je element aktivní.
Řádek 280: Řádek 315:
 </fragment-block> </fragment-block>
   * https://www.w3schools.com/js/tryit.asp?filename=tryjs_events_onkeydown   * https://www.w3schools.com/js/tryit.asp?filename=tryjs_events_onkeydown
- +<---- 
 +---->
 === Další události  === === Další události  ===
  
 https://www.w3schools.com/js/js_events_examples.asp https://www.w3schools.com/js/js_events_examples.asp
  
 +<----
  • spse/pm3/javascript-2.1610491682.txt.gz
  • Poslední úprava: 2024/07/07 16:48
  • (upraveno mimo DokuWiki)