spse:pm3:javascript-2 [wiki Avrio.cz]

Tato stránka je pouze pro čtení. Můžete si pouze prohlédnout zdrojový kód, ale ne ho měnit. Zeptejte se správce, pokud si myslíte, že něco není v pořádku.
~~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:
<fragment-block>
<code javascript>
var person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};
 </code>
</fragment-block>
<fragment-block>
=== Vlastnosti objektu ===
</fragment-block>
  * k vlastnostem objektu lze přistupovat dvěma způsoby:

<fragment-block>
<code javascript>
objectName.propertyName
// nebo
objectName["propertyName"]
</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 =====
  * posloupnost znaků, které tvoří vyhledávací vzor
  * slouží pro vyhledávání a nahrazování textu podle obecného vzoru
  * **syntax** - ''/vzor/modifikátory;''
<fragment-block>
<code javascript>
var patt = /w3schools/i;
</code>
</fragment-block>
  * **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

<----