alert("Вычисление выражения")
var a = 5 + 8
alert(a)
JavaScript — мультипарадигменный язык программирования. Поддерживает стили:
объектно-ориентированный
императивный
функциональный
JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений.
Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.
JavaScript является интерпретируемым языком
alert("Вычисление выражения")
var a = 5 + 8
alert(a)
alert("Вычисление выражения"); var a = 5 + 8; alert(a);
alert("Вычисление выражения");
var a = 5 + 8;
alert(a);
// вывод сообщения
alert("Вычисление выражения");
// арифметическая операция
var a = 5 + 8;
alert(a);
// вывод сообщения
/* вывод сообщения и
арифметическая операция */
alert("Вычисление выражения");
var a = 5 + 8;
alert(a);
var myIncome;
// другой вариант
let myIncome2;
// еще вариант
myIncome3;
a1 = 1;
console.log(a1);
var a2 = 2;
console.log(a2);
let a3 = 3;
console.log(a3);
1 2 3
c = 1;
console.log(c);
var c = 2;
console.log(c);
let c = 2; (0)
console.log(c);
Uncaught SyntaxError: redeclaration of var c
$commision
someVariable
product_Store
income2
myIncome_from_deposit
222lol
@someVariable
my%percent
var for;
var income = 300;
income = 400;
console.log(income);
let price = 76;
price = 54;
console.log(price);
400 54
const rate = 10;
const rate = 10;
rate = 23; (0)
Uncaught TypeError: invalid assignment to const 'rate'
const rate; (0)
Uncaught SyntaxError: missing = in const declaration
Примитивные типы
String
: представляет строку
Number
: представляет числовое значение
Boolean
: представляет логическое значение true
или false
undefined
: указывает, что значение не установлено
null
: указывает на неопределенное значение
object
: объектный тип
Целые числа. Диапазон используемых чисел: от -2^53
до 2^53
.
Дробные числа (числа с плавающей точкой). Для чисел с плавающей точкой используется тот же диапазон: от -2^53
до 2^53
.
var helloWorld = "Привет мир";
var helloWorld2 = 'Привет мир';
var helloWorld = 'Привет мир"; (0)
Uncaught SyntaxError: '' literal not terminated before end of scrip
var companyName = "Бюро \"Рога и копыта\"";
var companyName1 = "Бюро 'Рога и копыта'";
var companyName2 = 'Бюро "Рога и копыта"';
Boolean
var isAlive = true;
var isDead = false;
undefined
var isAlive;
console.log(isAlive);
undefined
null
и undefined
null
: означает, что переменная имеет некоторое неопределенное значение
undefined
: означает, что переменная не имеет значения (фактически: отсутствие чего-либо)
null
и undefined
var isAlive;
console.log(isAlive);
isAlive = null;
console.log(isAlive);
isAlive = undefined; // снова установим тип undefined
console.log(isAlive);
undefined null undefined
object
var user = {};
var user = {name: "Tom", age:24};
console.log(user.name);
Tom
var xNumber; // тип `undefined`
console.log(xNumber);
xNumber = 45; // тип `number`
console.log(xNumber);
xNumber = "45"; // тип `string`
console.log(xNumber);
undefined 45 45
var xNumber = 45; // тип `number`
var yNumber = xNumber + 5;
console.log(yNumber);
xNumber = "45"; // тип `string`
var zNumber = xNumber + 5
console.log(zNumber);
50 455
typeof
var name = "Tom";
console.log(typeof name);
var income = 45.8;
console.log(typeof income);
var isEnabled = true;
console.log(typeof isEnabled);
var undefVariable;
console.log(typeof undefVariable);
string number boolean undefined
+
-
*
/
%
++
--
=
+=
-=
*=
/=
%=
==
- оператор равенства (значения)
===
- оператор тождественности (типы и значения)
!=
!==
<
>
<=
>=
&&
||
!
var name = "Том";
var surname = "Сойер"
var fullname = name + " " + surname;
console.log(fullname);
Том Сойер
var name = "Том";
var fullname = name + 256;
console.log(fullname);
Том256
var number1 = "46";
var number2 = "4";
var result = number1 + number2;
console.log(result);
464
parseInt()
var number1 = "46";
var number2 = "4";
var result = parseInt(number1) + parseInt(number2);
console.log(result);
50
parseFloat()
var number1 = "46.07";
var number2 = "4.98";
var result = parseFloat(number1) + parseFloat(number2);
console.log(result);
51.05
var num1 = "123hello";
var num2 = parseInt(num1);
console.log(num2);
123
NaN
и isNaN()
var num1 = "javascript";
var num2 = "22";
var result = isNaN(num1);
console.log(result);
result = isNaN(num2);
console.log(result);
true false
var num1 = "110";
var num2 = parseInt(num1, 2);
console.log(num2);
6
var myArray = new Array();
var myArray = [];
var people = ["Tom", "Alice", "Sam"];
console.log(people);
[ "Tom", "Alice", "Sam" ]
var people = ["Tom", "Alice", "Sam"];
console.log(people[7]);
undefined
var people = ["Tom", "Alice", "Sam"];
console.log(people[7]);
people[7] = "Bob";
console.log(people[7]);
undefined Bob
var objects = ["Tom", 12, true, 3.14, false];
console.log(objects);
[ "Tom", 12, true, 3.14, false ]
let numbers = [1, 2, 3, 4];
console.log(...numbers);
console.log(numbers);
1 2 3 4 [1, 2, 3, 4]
var numbers1 = [0, 1, 2, 3, 4, 5 ]; // одномерный массив
var numbers2 = [[0, 1, 2], [3, 4, 5]]; // двумерный массив
var myVar = 89;
if (myVar) {
// действия
}
undefined
if (typeof myVar != "undefined") {
// действия
}
true
или false
true
или false
?(undefined) ? true : false
false
true
или false
?(null) ? true : false
false
true
или false
?(true) ? true : false
true
(false) ? true : false
false
true
или false
?(0) ? true : false
false
(NaN) ? true : false
false
true
или false
?('') ? true : false
false
true
или false
?(new Boolean(false)) ? true : false
true
for
while
do..while
for..in
- предназначен для перебора коллекций, например, массивов
for..of
- предназначен для перебора массивов и объектов
function имя_функции([параметр [, ...]]) {
// Инструкции
}
function display() {
document.write("функция в JavaScript");
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<script>
function display() {
document.write("функция в JavaScript");
}
display();
</script>
</body>
</html>
var display = function() { // определение функции
document.write("функция в JavaScript");
}
display();
функция в JavaScript
function goodMorning() {
document.write("Доброе утро");
}
function goodEvening() {
document.write("Добрый вечер");
}
var message = goodMorning;
message();
message = goodEvening;
message();
Доброе утро Добрый вечер
function display(x) { // определение функции
var z = x * x;
console.log(x + " в квадрате равно " + z);
}
display(5); // вызов функции
5 в квадрате равно 25
function sum(a, b, c) {
let d = a + b + c;
console.log(d);
}
sum(1, 2, 3);
let nums = [4, 5, 6];
sum(...nums);
6 15
function display(x, y) {
if(x === undefined) x = 8;
if(y === undefined) y = 5;
let z = x * y;
console.log(z);
}
display();
display(6);
display(6, 4);
40 30 24
function display(x = 5, y = 10) {
let z = x * y;
console.log(z);
}
display();
display(6);
display(6, 4);
50 60 24
function display(x = 5, y = 10 + x) {
let z = x * y;
console.log(z);
}
display();
display(6);
display(6, 4);
75 96 24
function display(season, ...temps) {
console.log(season);
for (index in temps) {
console.log(temps[index]);
}
}
display("Весна", -2, -3, 4, 2, 5);
display("Лето", 20, 23, 31);
Весна -2 -3 4 2 5 Лето 20 23 31;
var y = 6;
var z = square(y);
console.log(y + " в квадрате равно " + z);
function square(x) {
return x * x;
}
6 в квадрате равно 36
function sum(x, y) {
return x + y;
}
function subtract(x, y) {
return x - y;
}
function operation(x, y, func) {
var result = func(x, y);
console.log(result);
}
console.log("Sum");
operation(10, 6, sum);
console.log("Subtract");
operation(10, 6, subtract);
Sum 16 Subtract 4
function menu(n) {
if (n == 1)
return function(x, y) { return x + y;}
else if(n == 2)
return function(x, y) { return x - y;}
else if(n == 3)
return function(x, y) { return x * y;}
return undefined;
}
for (var i=1; i < 5; i++) {
var action = menu(i);
if (action !== undefined) {
var result = action(5, 4);
console.log(result);
}
}
9 1 20
global
local
var x = 5; (1)
let d = 8; (1)
function displaySquare() {
var z = x * d; (2)
console.log(z);
}
displaySquare()
40
var a = 89;
function displaySquare() {
var a = 10;
console.log(a);
}
displaySquare();
10
let
let b = 10;
function displayZ() {
let b = 20;
{
let b = 30;
console.log("Block:", b);
}
console.log("Function:", b);
}
displayZ();
console.log("Global:", b);
Block: 30 Function: 20 Global: 10
var
var c = 10;
function displaySquare() {
var c = 20;
{
var c = 30;
console.log("Block:", c);
}
console.log("Function:", c);
}
displaySquare()
console.log("Global:", c)
Block: 30 Function: 30 Global: 10
const
const z = 10;
function displayZ() {
const z = 20;
{
const z = 30;
console.log("Block:", z);
}
console.log("Function:", z);
}
displayZ();
console.log("Global:", z);
Block: 30 Function: 20 Global: 10
function bar() {
foo = "25";
}
bar();
console.log(foo);
25
function bar() {
var foo = "25";
}
bar();
console.log(foo);
Uncaught ReferenceError: foo is not defined
"use strict";
function bar() {
foo = "25";
}
bar();
console.log(foo);
Uncaught ReferenceError: assignment to undeclared variable foo
console.log(foo);
Uncaught ReferenceError: foo is not defined
console.log(foo);
var foo = "Tom";
undefined
var c = a * b;
var a = 7;
var b = 3;
console.log(c);
NaN
display();
function display() {
console.log("Hello Hoisting");
}
Hello Hoisting
display();
var display = function () {
console.log("Hello Hoisting");
}
TypeError: display is not a function
window
window
window
alert()
alert("hello world");
confirm()
var result = confirm("Завершить выполнение программы?");
if (result === true) {
document.write("Работа программы завершена");
} else {
document.write("Программа продолжает работать");
}
prompt()
var age = prompt("Введите свой возраст:");
document.write("Вам " + age + " лет");
open()
var popup = window.open('https://rakovets.by', 'Rakovets', 'width=400, height=400, resizable=yes');
close()
var popup = window.open('https://rakovets.by', 'Rakovets', 'width=400, height=400, resizable=yes');
function closeWindow() {
popup.close();
}
setTimeout(closeWindow, 10000);
moveTo()
var popup = window.open('https://rakovets.by', 'Rakovets', 'width=400, height=400, resizable=yes');
popup.moveTo(50, 50);
resizeTo()
var popup = window.open('https://rakovets.by', 'Rakovets', 'width=400, height=400, resizable=yes');
popup.resizeTo(500, 350); // 500 - ширина и 350 - высота
setTimeout()
var timerId = setTimeout(someFunction, period);
function timerFunction() {
document.write("выполнение функции setTimeout");
}
setTimeout(timerFunction, 3000);
function timerFunction() {
document.write("выполнение функции setTimeout");
}
var timerId = setTimeout(timerFunction, 3000);
clearTimeout(timerId);
setInterval()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="time"></div>
<script>
function updateTime() {
document.getElementById("time").innerHTML = new Date().toTimeString();
}
setInterval(updateTime, 1000);
</script>
</body>
</html>
requestAnimationFrame()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#rect {
margin: 100px;
width: 100px;
height: 100px;
background: #50c878;
}
</style>
</head>
<body>
<div id="rect"></div>
<script>
var square = document.getElementById("rect");
var angle = 0;
function rotate() {
angle = (angle + 2) % 360;
square.style.transform = "rotate(" + angle + "deg)";
window.requestAnimationFrame(rotate);
}
var id = window.requestAnimationFrame(rotate);
</script>
</body>
</html>
requestAnimationFrame()
window.cancelAnimationFrame(id);
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Page Header</h2>
<div>
<h3>Block Header</h3>
<p>Text</p>
</div>
</body>
</html>
Element: HTML-элемент
Attr: атрибут HTML-элемента
Document: корневой узел HTML-документа
DocumentType: DTD или тип схемы XML-документа
DocumentFragment: место для временного хранения частей документа
EntityReference: ссылка на сущность XML-документа
ProcessingInstruction: инструкция обработки веб-страницы
Comment: элемент комментария
Text: текст элемента
CDATASection: секция CDATA в документе XML
Entity: необработанная сущность DTD
Notation: нотация, объявленная в DTD
getElementById(value)
getElementsByTagName(value)
getElementsByClassName(value)
querySelector(value)
querySelectorAll(value)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div>
<h3 id="header">Block Header</h3>
<p>Text</p>
</div>
<script>
var headerElement = document.getElementById("header");
document.write("Текст заголовка: " + headerElement.innerText);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div>
<h3>Заголовок</h3>
<p>Первый абзац</p>
<p>Второй абзац</p>
</div>
<script>
var pElements = document.getElementsByTagName("p");
for (var i = 0; i < pElements.length; i++) {
document.write("Текст параграфа: " + pElements[i].innerText + "<br/>");
}
</script>
</body>
</html>
document
documentElement
: предоставляет доступ к корневому элементу <html>
body
: предоставляет доступ к элементу <body>
на веб-странице
images
: содержит коллекцию всех объектов изображений (элементов img
)
links
: содержит коллекцию ссылок - элементов <a>
и <area>
, у которых определен атрибут href
anchors
: предоставляет доступ к коллекции элементов <a>
, у которых определен атрибут name
forms
: содержит коллекцию всех форм на веб-странице
Node
Node
childNodes
: содержит коллекцию дочерних узлов
firstChild
: возвращает первый дочерний узел текущего узла
lastChild
: возвращает последний дочерний узел текущего узла
previousSibling
: возвращает предыдущий элемент, который находится на одном уровне с текущим
nextSibling
: возвращает следующий элемент, который находится на одном уровне с текущим
Node
ownerDocument
: возвращает корневой узел документа
parentNode
: возвращает элемент, который содержит текущий узел
nodeName
: возвращает имя узла
nodeType
: возвращает тип узла в виде числа. 1 - элемент, 2 - атрибут, 3 - текст
nodeValue
: возвращает или устанавливает значение узла в виде простого текста
Node
document.createElement(elementName)
: создает элемент html
, тег которого передается в качестве параметра. Возвращает созданный элемент
document.createTextNode(text)
: создает и возвращает текстовый узел. В качестве параметра передается текст узла.
node.appendChild(newNode)
: добавляет новый узел newNode
в конец коллекции дочерних узлов
node.insertBefore(newNode, referenceNode)
: добавляет новый узел newNode
перед узлом referenceNode
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div class="article">
<h3>Заголовок статьи</h3>
<p>Первый абзац</p>
<p>Второй абзац</p>
</div>
<script>
var articleDiv = document.querySelector("div.article");
// создаем элемент
var elem = document.createElement("h2");
// создаем для него текст
var elemText = document.createTextNode("Привет мир");
// добавляем текст в элемент в качестве дочернего элемента
elem.appendChild(elemText);
// добавляем элемент в блок div
articleDiv.appendChild(elem);
</script>
</body>
</html>
node.cloneNode()
node.removeChild(removalNode)`
node.replaceChild(newNode, oldNode)
Element
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div class="article">
<h3>Заголовок статьи</h3>
<p>Первый абзац</p>
<p>Второй абзац</p>
</div>
<script>
function getChildren(elem) {
for(var i in elem.childNodes) {
if(elem.childNodes[i].nodeType===1) {
console.log(elem.childNodes[i].tagName);
getChildren(elem.childNodes[i]);
}
}
}
var root = document.documentElement;
console.log(root.tagName);
getChildren(root);
</script>
</body>
</html>
innerText
и innerHTML
var pElement = document.querySelectorAll("div.article p")[0];
pElement.innerText = "hello";
pElement.textContent = "hello";
var articleDiv = document.querySelector("div.article");
articleDiv.innerHTML ="<h2>Hello World!!!</h2><p>bla bla bla</p>";
Element
getAttribute(attr)
: возвращает значение атрибута attr
setAttribute(attr, value)
: устанавливает для атрибута attr
значение value
. Если атрибута нет, то он добавляется
removeAttribute(attr)
: удаляет атрибут attr
и его значение
Element
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div class="article" style="color:red;">
<h3>Заголовок статьи</h3>
<p>Первый абзац</p>
<p>Второй абзац</p>
</div>
<script>
var articleDiv = document.querySelector("div.article");
// получаем атрибут style
var styleValue = articleDiv.getAttribute("style");
console.log("До изменения атрибута: " + styleValue);
// удаляем атрибут
articleDiv.removeAttribute("style");
// добавляем заново атрибут style
articleDiv.setAttribute("style", "color:blue;");
styleValue = articleDiv.getAttribute("style");
console.log("После изменения атрибута: " + styleValue);
</script>
</body>
</html>
offsetWidth
offsetHeight
clientWidth
clientHeight
События мыши (перемещение курсора, нажатие мыши и т.д.)
События клавиатуры (нажатие или отпускание клавиши клавиатуры)
События жизненного цикла элементов (например, событие загрузки web-станицы)
События элементов форм (нажатие кнопки на форме, выбор элемента в выпадающем списке и т.д.)
События, возникающие при изменении элементов DOM
События, возникающие при касании на сенсорных экранах
События, возникающие при возникновении ошибок
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="rect" onclick="displayMessage()" style="width:50px;height:50px;background-color:blue;">
</div>
<script>
function displayMessage() {
alert('Нажато');
}
</script>
</body>
</html>
<a href="page1.html" onclick="handler(this)">Страница 1</a>
<script>
function handler(obj) {
alert(obj.href);
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#rect {
width: 50px;
height: 50px;
background-color: blue;
}
</style>
</head>
<body>
<div id="rect" onclick="handler(event)"></div>
<script>
function handler(e) {
alert(e.type);
}
</script>
</body>
</html>
<div id="rect" onclick="handler(event)"></div>
Код HTML смешивается с кодом JavaScript, в связи с чем становится труднее разрабатывать, отлаживать и поддерживать приложение.
Обработчики событий можно задать только для уже созданных на web-странице элементов. Динамически создаваемые элементы в этом случае лишаются возможности обработки событий.
К элементу для одного события может быть прикреплен только один обработчик.
Нельзя удалить обработчик без изменения кода
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#rect {
width: 50px;
height: 50px;
background-color: blue;
}
</style>
</head>
<body>
<div id="rect">
</div>
<script>
function handler(e) {
alert(e.type);
}
document.getElementById("rect").onclick = handler;
</script>
</body>
</html>
EventTarget.addEventListener()
для добавления слушателя
EventTarget.removeEventListener()
для удаления слушателя
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
#rect {
width: 50px;
height: 50px;
background-color: blue;
}
</style>
</head>
<body>
<div id="rect">
</div>
<script>
var rect = document.getElementById("rect");
rect.addEventListener("click", function(e) {
alert(e.type);
});
</script>
</body>
</html>
var clicks = 0;
function handlerOne(e) {
alert(e.type);
}
function handlerTwo(e) {
clicks++;
var newNode = document.createElement("p");
newNode.textContent = "произошло нажатие " + clicks;
document.body.appendChild(newNode);
}
var rect = document.getElementById("rect");
// прикрепляем первый обработчик
rect.addEventListener("click", handlerOne);
// прикрепляем второй обработчик
rect.addEventListener("click", handlerTwo);
Event
Event
bubbles
: возвращает true
, если событие является восходящим. Например, если событие возникло на вложенном элементе, то оно может быть обработано на родительском элементе.
cancelable
: возвращает true
, если можно отменить стандартную обработку события.
currentTarget
: определяет элемент, к которому прикреплен обработчик события.
Event
defaultPrevented
: возвращает true
, если был вызван у объекта Event
метод preventDefault()
.
eventPhase
: определяет стадию обработки события.
target
: указывает на элемент, на котором было вызвано событие.
timeStamp
: хранит время возникновения события.
type
: указывает на имя события.
Восходящие: событие распространяется вверх по дереву DOM от дочерних узлов к родительским.
Нисходящие: событие распространяется вниз по дереву DOM от родительских узлов к дочерним, пока не достигнет того элемента, на котором это событие и возникло.
var redRect = document.getElementById("redRect");
redRect.addEventListener("click", function(e){
console.log("Событие на redRect");
e.stopPropagation();
});
var redRect = document.getElementById("redRect");
redRect.addEventListener("click", function() {console.log("Событие на redRect");}, true);
var blueRect = document.getElementById("blueRect");
blueRect.addEventListener("click", function() {console.log("Событие на blueRect");}, true);
document.body.addEventListener("click", function() {console.log("Событие на body");}, true);