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

Toto je starší verze dokumentu!

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

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

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();

¹⁾

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)

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!

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

²⁾

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.

getElementById
innerHTML

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

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

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

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

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.

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

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

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

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>