Rozdíly

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

--- spse:pm3:javascript-2 [2021/01/12 22:47] – jenda
+++ spse: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í =====
@@ Řádek 17: / Řádek 21: @@
  </code>
 </fragment-block>
+<fragment-block>
 === Vlastnosti objektu ===
+</fragment-block>
   * k vlastnostem objektu lze přistupovat dvěma způsoby:
@@ Řádek 34: / Řádek 39: @@
 ==== Metody ====
   * Metodu pro objekt lze definovat přidáním funkce:
+<fragment-block>
 <code javascript>
 var person = {
@@ Řádek 44: / Řádek 50: @@
 }
 </code>
+</fragment-block>
+<fragment-block>
 === Přístup k metodě objektu ===
+</fragment-block>
 <fragment-block>
 <code javascript>
@@ Řádek 64: / Řádek 72: @@
 </code>
 </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)
 ==== Metody regulárních výrazů ====
@@ Řádek 88: / Řádek 96: @@
-===== BOM =====
+===== BOM (Browser Object Model) =====
 ==== Window objekt ====
@@ Řádek 109: / Řádek 117: @@
 ===== 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))
+---->
   * JS má naprostou kontrolu nad objekty, které jsou součástí html.
     * JS může změnit všechny prvky HTML na stránce.
@@ Řádek 120: / Řádek 128: @@
     * 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 ====
@@ Řádek 128: / Řádek 136: @@
 <fragment-block>
 <code html>
-<html>
+<html><body>
-<body>
 <p id="demo"></p>
 <script>
 document.getElementById("demo").innerHTML = "Hello World!";
 </script>
+</body></html>
-</body>
-</html>
 </code>
 </fragment-block>
+---->
 === Hledání HTML tagů ===
 ^Metoda^Popis^
@@ Řádek 147: / Řádek 151: @@
 |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^
@@ Řádek 157: / Řádek 162: @@
 ^Metoda^Popis^
 |element.setAttribute(attribute, value)|Nastavý nový atribut tagu a jeho hodnotu|
+<----
+---->
 === Přidat a odebrat html tag ===
 ^Metoda^Popis^
@@ Řádek 166: / Řádek 171: @@
 |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 id="demo"></p>
+<p><button onclick="myMove()">Click Me</button></p>
+<div id ="container">
+  <div id ="animate"></div>
+</div>
 <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>
 </body>
 </html>
 </code>
 </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====
   * 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.
@@ Řádek 199: / Řádek 237: @@
 </fragment-block>
   * https://www.w3schools.com/js/tryit.asp?filename=tryjs_event_onclick2
 <fragment-block>
@@ Řádek 208: / Řádek 245: @@
 </code>
 </fragment-block>
+<----
+---->
 === onMouseOver / onMouseOut ===
 <fragment-block>
-<code javascript>
+<code html>
 <div onmouseover="mOver(this)" onmouseout="mOut(this)"
 style="background-color:#D94A38;width:120px;height:20px;padding:40px;">
@@ Řádek 230: / Řádek 267: @@
 </fragment-block>
   * https://www.w3schools.com/js/tryit.asp?filename=tryjs_events_mouseover
+<----
+---->
 === onMouseDown / onMouseUp ===
 <fragment-block>
-<code javascript>
+<code html>
 <div onmousedown="mDown(this)" onmouseup="mUp(this)"
 style="background-color:#D94A38;width:90px;height:20px;padding:40px;">
@@ Řádek 253: / Řádek 291: @@
 </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í.
@@ Řádek 276: / Řádek 315: @@
 </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
+<----