Javascript - Regulární výrazy, Objekty, DOM

Toto je starší verze dokumentu!

→ Slide 1

→ Slide 2

JavaScript podporuje tři druhy objektů: objekty definované uživatelem, vestavěné objekty JavaScriptu a objekty prohlížeče.

↓ Slide 3

Chceme-li definovat objekt, vytvoříme jej takto:

var person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

Vlastnosti objektu

k vlastnostem objektu lze přistupovat dvěma způsoby:

objectName.propertyName
// nebo
objectName["propertyName"]

↓ Slide 4

Metodu pro objekt lze definovat přidáním funkce:

var person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
}

Přístup k metodě objektu

//objectName.methodName();
name = person.fullName();

¹⁾

→ Slide 5

posloupnost znaků, které tvoří vyhledávací vzor
slouží pro vyhledávání a nahrazování textu podle obecného vzoru
syntax - /vzor/modifikátory;

var patt = /w3schools/i;

w3schools - vzor ke hledání
i - modifikátor → vyhledávání nebude casesensitive (nezáleží na velikosti písmen)

↓ Slide 6

search() - najde a vrátí pozici hledaného výrazu
replace() - najde a nahradí hledaný výraz.

var str = "Visit W3Schools";
var n = str.search(/w3schools/i);
// výsledek: 6

var str = "Visit Microsoft!";
var res = str.replace(/microsoft/i, "W3Schools");
// Visit W3Schools!

→ Slide 7

↓ Slide 8

<!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>

→ Slide 9

²⁾

↓ Slide 10

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.

↓ Slide 11

getElementById
innerHTML

<html><body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body></html>

↓ Slide 12

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

↓ Slide 13

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

↓ Slide 14

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

↓ Slide 15

<!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>

https://www.w3schools.com/js/tryit.asp?filename=tryjs_dom_animate_3

↓ Slide 16

reaguje na uživatele
https://www.w3schools.com/js/js_htmldom_events.asp

↓ Slide 17

onClick

JS událost, která se spouští při kliknutí levým tlačítkem myši na určitý element.

<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>

https://www.w3schools.com/js/tryit.asp?filename=tryjs_event_onclick2

<script>
document.getElementById("myBtn").onclick = displayDate;
</script>

↓ Slide 18

onMouseOver / onMouseOut

<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>

https://www.w3schools.com/js/tryit.asp?filename=tryjs_events_mouseover

↓ Slide 19

onMouseDown / onMouseUp

<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>

https://www.w3schools.com/js/tryit.asp?filename=tryjs_events_mousedown

↓ Slide 20

onKeyDown

Při stlačení klávesy ve chvíli, kdy je element aktivní.

<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>