Добавил:
ivanov666
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Предмет:
Файл:Технологии разработки клиентских WEB-приложений на языке JavaScript. Учебное пособие
.pdf
41
// async
class MyClass { async m() {} }
-
setTimeout(() => {
Hello
}, 3000);
callback Promise.
Async
async await. async/await . Async Promises
Отложенные вычисления
JavaSript
setTimeout setInterval.
setTimeout setInterval
setTimeout():
let timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...)
func|code
[delay].
[delay]
0,
[arg1], [arg
setTimeout(),
func.
3 Hello world.
42
setTimeout(greeting, 3000);
function greeting() {
}
setTimeout(greeting, 300, “Hello );
function greeting(x) {
console.log(x);
}
const timeout = setTimeout(greeting, 300, “Hello );
if (true) {
clearTimeout(timeout);
}
function greeting(x) {
console.log(x);
}
clearTimeout().
setInterval():
let timerId = setInterval(func|code, [delay], [arg1], [arg2], ...)
setTimeout().
greeting 3
clearTimeout
clearInterval.
Практическое задание
1
2
• 5
•
43
• 5
2
Promise
•
number reject,
• async/await
•
Promise;
•
Работа с DOM
Описание модели DOM
DOM ( - HTML XML
JavaScript
HTML
DOM
1
html
Document - HTML
Elements: HTML XML,
DOM.
Text:
Attributes: HTML.
class = "hero" <p>.
44
1. DOM
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Entendendo o DOM (Document Object Model)</title>
</head>
<body>
<div class="container">
<h1><time>00:00:00</time></h1> <button id="start">Start</button> <b
utton id="stop">Stop</button> <button
id="reset">Reset</button>
События и методы
DOM
html
45
</div>
</body>
</html>
JavaScript DOM document.
getElementById()
var myStart = document.getElementsById('start');
myStart DOM
id start
start
getElementsByClassName()
HTML
var myContainer = document.getElementsByClassName('container');
.container
HTML
getElementsByTagName()
var buttons = document.getElementsByTagName('button');
button
46
querySelector()
myStart.addEventListener('click', function(event) {
// Do something here.
}, false);
CSS. CSS.
var resetButton = document.querySelector('#reset');
#reset -
,
querySelectorAll()
querySelector(),
CSS.
CSS.
var myButtons = document.querySelector('#buttons');
#buttons -
DOM.
createElement (),
HTML- setAttribute (),
HTML.
DOM
click
addEventListener ():
•
• callback
• UseCapture false.
select
47
-
myStart.addEventListener('select', function(event) {
alert('Element selected!');
}, false);
Обход элементов DOM
DOM
.childNodes
nodeList
var container = document.querySelector('.container');
var getContainerChilds = container.childNodes;
.firstChild
.
var container = document.querySelector('.container');
var getFirstChild = container.firstChild;
.nodeName
div
var container = document.querySelector('.container');
var getName = container.nodeName;
.nodeValue
div, null.
var container = document.querySelector ('. container')
var getValue = container.nodeValue;
.nodeType
var container = document.querySelector('.container')
var getValue = container.nodeType;
nodeType _ELEMENT_NODE_
48
Dom.
. 2 nodeTypes nodeName nodeValue
2. Node type, nodeName nodeValue
Элементы DOM
.parentNode
var container = document.querySelector('.container')
var getParent = container.parentNode;
.firstElementChild
var container = document.querySelector('.container')
var getValue = container.firstElementChild;
.lastElementChild
var container = document.querySelector('.container')
var getValue = container.lastElementChild;
49
Практическое задание
HTML CSS
. 3.
3.
50
ЗАКЛЮЧЕНИЕ
WEB-
JavaScript, Internet-
.
WEB-
JavaScript,
Web-
Frameworks.
-191
JavaScript.
Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]