→ Slide 1
Javascript - Regulární výrazy, Objekty, DOM
→ Slide 2
základy objektově orientovaného programování
↓ Slide 3
Vytvoření nového objektu
var person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
Vlastnosti objektu
objectName.propertyName
// nebo
objectName["propertyName"]
↓ Slide 4
Metody
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();
1)
→ Slide 5
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;
var patt = /w3schools/i;
↓ Slide 6
Metody regulárních 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
BOM (Browser Object Model)
↓ Slide 8
Window objekt
<!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
DOM (Document Object Model)
2)
↓ Slide 10
↓ Slide 11
↓ 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
Animace
<!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>
↓ Slide 16
↓ Slide 17
onClick
<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>
<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>
↓ 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>
↓ Slide 20
onKeyDown
<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>
↓ Slide 21
