Service Worker API
(applicationCache)
XMLHttpRequest (AJAX)
XMLHttpRequest()
Properties
onreadystatechange
readyState
response
responseText
responseType
responseURL
responseXML
status
statusText
timeout
upload
withCredentials
Methods
abort()
getAllResponseHeaders()
getResponseHeader()
open()
overrideMimeType()
send()
setRequestHeader()
--
var xhr = new XMLHttpRequest(); // Создание объекта для HTTP запроса.
xhr.open("GET", "testfile.html"); // Настройка объекта для отправки GET запроса
xhr.open("POST", "PostHandler.ashx");
// Content-Type - HTTP заголовок, который указывает серверу, как интерпретировать тело запроса.
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () { // функция-обработчик срабатывает при изменении свойства readyState
// Значения свойства readyState:
// 0 - Метод open() еще не вызывался
// 1 - Метод open() уже был вызван, но метод send() еще не вызывался.
// 2 - Метод send() был вызван, но ответ от сервера еще не получен
// 3 - Идет прием данных от сервера. Для значения 3 Firefox вызывает обработчик события несколько раз IE только один раз.
// 4 - Ответ от сервера полностью получен (Запрос успешно завершен).
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("output").innerHTML = xhr.responseText; // текст ответа полученного с сервера.
}
}
xhr.send(); // Отправка запроса
Web Worker
Worker()
Properties
onerror
onmessage
onmessageerror
Methods
postMessage()
terminate()
Сookie / Storage
window.sessionStorage
window.localStorage
.setItem("key1", "value1")
.getItem()
.deleteItem()
.clear()
document.cookie = "name=value; max-age=3600 / expires=*";
encodeURIComponent()
decodeURIComponent()
StorageColor
cookieColor
События
селектор.событие = function () {}; тэг onclick="имяФункции();"
селектор.["событие"] = function () {};
.addEventListener("событие без on", function(){}) // добавляет событие
.removeEventListener("событие без on", function(){}, false); // удаление обработчика
document.attachEvent(); // for IE<=8
.dispatchEvent(event)
abort // прерывание загрузки img
animationcancel
animationend
blur // элемент теряет фокус
cancel
canplay
canplaythrough
change // Элемент потерял фокус и его значения с момента получения фокуса изменилось
('copy', (e) => {alert('Копирование запрещено'); e.preventDefault();});
cuechange
durationchange
ended
error // ощибка при загрузке изображения
focus
gotpointercapture
input
invalid
keydown // клавиша нажата
keypress // клавиша дала символ
keyup // клавиша отпущена
window.onbeforeunload = function() {return "Данные не сохранены. Точно перейти?";};
// Событие произойдет перед закрытием страницы.
window.onload = function () {} // событие срабатывает после полной загрузки окна.
DOMContentLoaded
loadeddata
loadedmetadata
loadend
loadstart
lostpointercapture
// mouse:
click // Была нажата и отпущена клавиша мыши
dblclick // Двойной щелчок
contextmenu // клик правой кнопкой мышки
mousedown
mouseenter
mouseleave
mousemove // Перемещение указателя мыши
mouseout // курсор вышел за пределы элемента.
mouseover // курсор вошел в пределы элемента.
mouseup
('wheel', (e) => {.innerText = deltaY}) // генерируется над любым элементом, не важно, прокручиваемый он или нет.
('paste', (e) => {.innerText = 'Введите текст. Вставка запрещена'; e.preventDefault();});
pause
play
pointercancel
pointerdown
pointerenter
pointerleave
pointermove
pointerout
pointerover
pointerup
reset // запрос на очистку полей формы
resize // изменение размера окна
scroll // над прокручиваемыми елементами
select // Выбор текста
submit // Запрос на передачу данных формы
transitioncancel
transitionend
unhandledrejection // обработчик ошибок
// Event
//Properties
.bubbles // Логическое значение, указывающее, вспыло ли событие вверх по DOM или нет.
.cancelable // Логическое значение, показывающее возможность отмены события
.cancelBubble // отмена всплытия
.composed
.currentTarget // узел чей обработчик события работает в данный момент.
.defaultPrevented // Показывает, была ли для события вызвана функция event.preventDefault().
.eventPhase // Указывает фазу процесса обработки события (1/2/3)
.explicitOriginalTarget // Явный первоначальный целевой объект события (Mozilla-специфичный).
.isTrusted // Показывает было или нет событие инициировано браузером или из скрипта
.originalTarget // Первоначальный целевой объект события до перенаправлений (Mozilla-специфичный).
.returnValue // присвоить false для предотвращения выполнения операции по умолчанию.
.srcElement // Нестандартный синоним для Event.target
.target // элемент, который был инициатором события
.timeStamp // объект Date, указывающий, когда произошло событие
.type // Название события (без учета регистра символов).
//Methods
.composedPath
.createEvent // Создаёт новое событие
.initEvent // Инициализация значений события
.preventDefault(); // отменяет стандартное действие
.stopImmediatePropagation // ля конкретного события не будет больше вызвано обработчиков.
.stopPropagation(); // останавливает перемещение события по DOM
// MouseEvent
// Properties
.altKey // true если клавиша Alt зажата.
.button // 0 - левая клавиша, 1 - средняя клавиша, 2 - правая.
.buttons
.charCode // код символа (передается при событии keypress)
.clientX / .clientY // координаты относительно левого верхнего угла документа.
.ctrlKey // true если клавиша Ctrl зажата.
.deltaY – количество прокрученных пикселей по вертикали
.keyCode // код клавиши для события keydown и keyup или код unicode символа для события keypress
.layerX / .layerY // координаты относительно элемента в котором произошло событие.
.metaKey
.movementX / .movementY
.mozInputSource
.offsetX / .offsetY // координаты относительно элемента в котором произошло событие.
.pageX / .pageY
.region
.relatedTarget
.screenX / .screenY // координаты относительно экрана.
.shiftKey // true если клавиша Shift зажата.
.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN
.WEBKIT_FORCE_AT_MOUSE_DOWN
.webkitForce
.which
.x / .y
// Methods
//getModifierState()
initMouseEvent
Event-add-remove
String
Properties
String.prototype
string.length
Methods
String.fromCharCode(e.charCode) // введеный символ
String.fromCodePoint()
.anchor()
.big()
.blink()
.bold()
.charAt(); //возвращает символ по указанной позиции
.charCodeAt()
.codePointAt()
.concat()
.endsWith()
.fixed()
.fontcolor()
.fontsize()
.includes()
.indexOf(""); //возвращает индекс первого встречающегося в строке указанного символа
.italics()
.lastIndexOf(""); //возвращает индекс последнего встречающегося в строке указанного символа
.link()
.localeCompare()
.match(); // принимает регулярное выражение и возвращает массив с результатами поиска
.matchAll()
.normalize()
.padEnd()
.padStart()
.quote()
.repeat()
.replace( , ""); // производит операцию поиска с заменой
.search(); // возвращает индекс первого найденного символа подстроки по шаблону или -1 если подстрока не найдена
.slice()
.small()
.split(""); //Разбивает строку на подстроки по указанному разделителю и возвращает массив подстрок.
.startsWith()
.strike()
.sub()
.substr(0, 2); //возвращает строку начиная с указанного индекса, указанной длины
.substring(0, 2); //возвращает строку между двумя указанными индексами, не включая индексы
.sup()
.toLocaleLowerCase()
.toLocaleUpperCase()
.toLowerCase(); //перевод всех символов в нижний регистр
.toSource()
.toString()
.toUpperCase(); //перевод всех символов в верхний регистр
.trim()
.trimEnd()
.trimStart()
.valueOf()
String.prototype[@@iterator]()
String.raw()
Memoize
// Мемоизация - прием кэширования результатов функции.
function calcFib(x) {
// проверка наличия результата для параметра x.
if (!calcFib.cache[x]) { // если результат не найден то производим вычесления.
if (x > 1) {
calcFib.cache[x] = calcFib(x - 1) + calcFib(x - 2);
}
else { calcFib.cache[x] = x }
}
return calcFib.cache[x];
}
// создание свойства в функции с пустым объектом.
calcFib.cache = {};
for (let i = 0; i < 40; i++) {
document.write(`${i} = ${calcFib(i)} < br />`);
}
document
Methods:
.adoptNode()
.caretRangeFromPoint()
.clear()
.close()
.createAttribute()
.createCDATASection()
.createComment()
.createDocumentFragment()
.createElementNS()
.createEntityReference()
.createEvent()
.createExpression()
.createNodeIterator()
.createNSResolver()
.createProcessingInstruction()
.createRange()
.createTextNode()
.createTouch()
.createTouchList()
.createTreeWalker()
.enableStyleSheetsForSet()
.evaluate()
.execCommand()
.exitFullscreen()
.exitPointerLock()
.getAnimations()
.getBoxObjectFor()
.getElementsByTagNameNS()
.hasFocus()
.hasStorageAccess()
.importNode()
.mozSetImageElement()
.open()
.queryCommandEnabled()
.queryCommandSupported()
.registerElement()
.releaseCapture()
.requestStorageAccess()
.write()
.writeln() // + перевод строки
Properties:
body
characterSet
childElementCount
children
compatMode
contentType
cookie
currentScript
defaultView
designMode
dir
doctype
documentElement
documentURI
domain
embeds
firstElementChild
forms
fullscreenEnabled
head
hidden
images
implementation
lastElementChild
lastModified
lastStyleSheetSet
links
location
plugins
preferredStyleSheetSet
readyState
referrer // адрес документа, содержащего ссылку, которая привела на текущую страницу
scripts
scrollingElement
selectedStyleSheetSet
styleSheetSets
title
URL
visibilityState
DOM
w3.org
// Свойства для навигации по DOM
.childNodes // массив всех дочерних узлов
.firstChild // первый дочерний узел
.lastChild // последний дочерний узел
.nextSibling // следующий узел расположенный на одном уровне с текущим
.previousSibling // предыдущий узел расположенный на одном уровне с текущим
.parentNode // родительский узел для текущего элемента
.hasChildNodes
// Методы для работы с DOM (узлы или строки)
.append(''); // добавляет в конец
.prepend(''); // добавляет в начало
.after('') // после
.before('') // перед
.replaceWith('') // заменяет
.remove()
.appendChild(); // добавить дочерний элемент
.insertBefore() // добавить элемент перед указанным
.removeChild(); // удаление дочернего элемента
.replaceChild() // замена одного элемента на другой
document.createElement('тэг')
document.getElementById("")
.getElementsByClassName()
.getElementsByName()
.getElementsByTagName()
document.querySelector('') // селекторы как в CSS , возвращает первый найденный
.querySelectorAll('') // возвращает все
.textContent = ; // вставить текст
document.createTextNode('text')
.insertAdjacentText('afterend', 'text')
.innerHTML = ""; // заполнить HTML-кодом
.insertAdjacentHTML('beforebegin', `html`); // вставить HTML-код
.insertAdjacentHTML('afterbegin', `html`);
.insertAdjacentHTML('beforeend', `html`);
.insertAdjacentHTML('afterend', `html`);
.insertAdjacentElement('', 'elem')
elem.className
elem.classList.add/remove("class") // добавить/удалить класс.
elem.classList.toggle("class") // добавить класс, если его нет, иначе удалить.
elem.classList.contains("class") // проверка наличия класса, возвращает true/false.
.style.cssText=` // Полная перезапись стилей
color: red !important;
background-color: yellow;
width: 100px;
text-align: center;
`;
Element
Properties
.accessKey
.attributes
.childElementCount
.children
.classList
.className
.clientHeight
.clientLeft
.clientTop
.clientWidth
.currentStyle
.firstElementChild
.id
.lastElementChild
.localName
.name
.namespaceURI
.nextElementSibling
.onfullscreenchange
.onfullscreenerror
.openOrClosedShadowRoot
.outerHTML
.prefix
.previousElementSibling
.runtimeStyle
.scrollHeight
.scrollLeft
.scrollLeftMax
.scrollTop
.scrollTopMax
.scrollWidth
.shadowRoot
.slot
.tabStop
.tagName
Methods
.after()
.animate()
.attachShadow()
.before()
.closest()
.computedStyleMap()
.createShadowRoot()
.getAnimations()
.getAttribute()
.getAttributeNames()
.getAttributeNode()
.getAttributeNodeNS()
.getAttributeNS()
.getBoundingClientRect()
.getClientRects()
.hasAttribute()
.hasAttributeNS()
.hasAttributes()
.hasPointerCapture()
.insertAdjacentElement()
.insertAdjacentHTML()
.insertAdjacentText()
.matches()
.msZoomTo()
.releasePointerCapture()
.remove()
.removeAttribute()
.removeAttributeNode()
.removeAttributeNS()
.replaceWith()
.requestFullscreen()
.requestPointerLock()
.scroll()
.scrollBy()
.scrollIntoView()
.scrollIntoViewIfNeeded()
.scrollTo()
.setAttribute()
.setAttributeNode()
.setAttributeNodeNS()
.setAttributeNS()
.setCapture()
.setPointerCapture()
.toggleAttribute()
HTMLElement
Properties
.contentEditable
.contextMenu
.dataset // в тэге data-
.dir
.hidden
.innerText
.isContentEditable
.lang
.nonce
.offsetHeight / .offsetWidth // высота / ширина элемента
.offsetLeft / .offsetTop // смещение элемента относительно родительского узла
.offsetParent
HTMLMediaElement
Properties
audioTracks
autoplay // воспроизведение сразу после загрузки
buffered
controller
controls // элементы управления воспроизведением
controlsList
crossOrigin
currentSrc // адрес медиафайла (чтение)
currentTime // текущее положение в клипе ,сек.
defaultMuted
defaultPlaybackRate
duration // длительность (чтение)
ended // true, если воспроизведение завершено (чтение)
error // код ошибки, если возникла (чтение)
initialTime
loop // если true, зацикливание воспроизведения
mediaGroup
muted // отключение звука
networkState
onerror
paused // true, если приостановлен (чтение)
playbackRate
readyState
seekable
sinkId
src
srcObject
textTracks
videoTracks
volume // громкость от 0.0 до 1.0
Methods // управляющие функции
canPlayType() // проверить способность проигрывать указанный тип MIME
captureStream()
fastSeek()
load() // загрузить и подготовить к воспроизведению
msInsertAudioEffect()
pause() // приостановить
play() // загрузить (если необходимо) и воспроизвести
requestFullscreen()
seekToNextFrame()
//setMediaKeys()
//setSinkId()
Events
abort
canplaythrough
error
loadeddata
loadstart
play
playing
progress
timeupdate
volumechange
waiting
Регулярные выражения
/\d\d\d/
var name = new RegExp("\d\d\d");
pattern.exec("string") // возвращает результат поиска по шаблону(только 1й, если не задано g)
pattern.test("string") // проверяет соответствие с шаблоном
// Метасимволы.
\w // Любой алфавитно-цифровой символ в верхнем и нижнем регистре и символ подчеркивания(тоже самое, что и [a-zA-Z0-9_]).
\W // Любой символ не являющийся подчеркиванием и не относящийся к алфавитно-цифровым
\s // любой пробельный символ (тоже самое, что [\r\n\f\v\t])
\S // Любой не пробельный символ (тоже самое, что [^\r\n\f\v\t])
\d // любая цифра (digit)
\D // любой не цифровой символ (тоже самое, что [^0-9])
\v // (вертикальная табуляция)
\t // (табуляция)
\r // (перевод каретки)
\n // (перевод строки)
\f // (перевод страницы)
// Наборы символов
[RrGgBb] // Соответствие указанным символам
[a-z] // Соответствие символам английского алфавита в нижнем регистре
[0-9] // Соответствие указанным цифрам
[^0-9] // Соответствие с чем угодно кроме цифр заданного диапазона
// Квантификатор (Кванторы)
+ //Один или несколько символов
* //ноль и более символов
? //ноль или одно вхождение
// Интервалы
{3} // точное количество совпадений
{2,3} // диапазон
{3,} // не менее
{,3} // не более
// Якорные символы
^ // Начало строки
$ // Конец строки
\b // соответствует границе слова
// Флаги
i // выполнение поиска не чувствительного к регистру.
g // выполнение глобального поиска.
m // многострочный режим.
Drag & Drop
атрибут draggable="true"
// dragstart - вызывается в самом начале переноса перетаскиваемого элемента.
// dragend - вызывается в конце события перетаскивания - как успешного, так и отмененного.
// dragenter - происходит в момент когда перетаскиваемый объект попадает в область целевого элемента.
// dragleave - происходит когда перетаскиваемый элемент покидает область целевого элемента.
// dragover - происходит когда перетаскиваемый элемент находиться над целевым элементом.
// drop - вызывается, когда событие перетаскивания завершается отпусканием элемента над целевым элементом.
.addEventListener('dragstart', function () {}, false);
.addEventListener('dragend', function () {}, false);
target.addEventListener('dragenter', function () {}, false);
target.addEventListener('dragleave', function () {}, false);
target.addEventListener('dragover', function () {}, false);
target.addEventListener('drop', function () {}, false);
// Свойство DataTransfer – место, где реализуется перетаскивание. Оно содержит часть данных,
// отправляемых при выполнении этого действия. Объект dataTransfer устанавливается в событии dragstart,
// а считывается и обрабатывается в событии drop.
// Свойство effectAllowed управляет визуальным эффектом (чаще всего это вид указателя мыши),
// который браузер создает в ответ
// на тип происходящего события перетаскивания (перемещение, копирование и т. п.).
.dataTransfer.effectAllowed = "move";
// Метод setData(...) сообщает механизму перетаскивания в браузере, какие данные из перетаскиваемого объекта должен «поймать»
// целевой элемент, также называемый зоной приема. Здесь мы указываем, что передаваемые данные это id элемента
evt.dataTransfer.setData("Text", this.id);
drag & drop
time / date
new Date(); // при вызове конструктора Date без параметров, создается объект Date отражающий текущую дату и время
.setFullYear()
.getFullYear()
.toGMTString()
performance.now() // источники времени
process.hrtime()
"Тяжёлое бремя времени"
secundomer
time
geolocation
navigator.geolocation.getCurrentPosition()
.textContent = position.coords.latitude; // широта
.textContent = position.coords.longitude; // долгота
.textContent = position.coords.accuracy; // точность(м)
.textContent = position.coords.altitude; // высота
.textContent = position.coords.altitudeAccuracy; // точность высоты
.textContent = position.coords.heading; // курс (направление) при движении(получаем градус отклонения от севера. 90deg - восток, 270deg - запад)
.textContent = position.coords.speed; // скорость движения(м/с).
// options: необязательный объект в методе getCurrentPosition
// {
// enableHighAccuracy: true, - попытаться получить наиболее точные данные - более длительная загрузка координат
// timeout: 2000, - данные должны быть получены в течении 2 секунд.
// maximumAge: 30000 - если данные были получены в течении последних 30 секунд их можно не запрашивать заново.
// }
navigator.geolocation.getCurrentPosition(updateLocation, handleError, { enableHighAccuracy: true, timeout: 2000, maximumAge: 30000 });
navigator.geolocation.watchPosition()
//Функция watchPosition работает аналогично getCurrentPosition, но возвращает
// объект-таймер, через который будет повторно вызываться операция поиска местоположения
// maximumAge: 1000 - каждую секунду нам будет возвращаться текущее положение
navigator.geolocation.clearWatch(); //clearWatch - удаляет таймер для обновления поиска расположения
canvas
< canvas id="canvas">< /canvas>
function init() {
var canvas = document.getElementById("canvas"); // получение элемента
var context = canvas.getContext("2d"); // и его графического контекста.
context.save(); // сохраняем копию текущего состояния контекста.
context.translate(100, 100); // переносим начало координат.
***
context.restore(); // восстанавливаем прежнее состояние контекста.
context.beginPath(); // начало пути
context.moveTo(100, 100); // первая точка
context.lineTo(100, 200); // Переход в точку с координатами (100,200)
context.closePath(); // Замыкаем путь
context.stroke(); // черчение линии на холсте.
context.fillRect(100, 100, 400, 300); // прямоугольник (x,y,width,height) x,y - Начало координат
context.strokeRect(0, 60, 150, 50); // прямоугольник без заливки
context.clearRect(80, 80, 35, 35); // очистка прямоугольной области от контента
context.lineWidth = 20; // толщина линии
context.strokeStyle = "green"; // цвет линий
context.fillStyle = "blue"; // цвет заливки
context.fill(); // залить
context.lineJoin = "miter"; "round"; "bevel"; //Определяем форму вершин, в которых сходятся линии
context.quadraticCurveTo(/*управляющая точка*/350, 50, /*вторая точка*/600, 300); // дуга
context.bezierCurveTo(/*управляющая точка 1*/50, 90,/*управляющая точка 2*/ 159, -30,/*вторая точка*/ 200, 30);
context.createPattern(item, 'repeat-x'); // повторяет указанный элемент по указанному направлению
//arc(x,y,radius,startAgle,endAngle,clockwise) // сектор
//Метод arc() принимает 6 аргументов:
//x, y - центр рисования дуги
//radius -радиус
//startAngle -начальный угол окружности
//endAngle - конечный угол окружности
//clockwise - направление прорисовки. false - по часовой стрелке
context.arc(100, 100, 50, 0, Math.PI*2, true);
context.scale(x, y); // масштабирование
context.rotate(angle); // вращение, угол
context.transform(scaleX, skewX, skewY, scaleY, transformX, transformY);
var logo = new Image();
logo.onload = function () {
context.drawImage(logo, 5, 5);
};
logo.src = "canvas.jpg";
//градиенты
// Создание объекта градиента и указание начальной и конечной точки оси градиента.
var gradient = context.createLinearGradient(0, 0, 270, 270);
// Добавление цвета и смещения позиции остановки цвета.
gradient.addColorStop(0, "Black");
gradient.addColorStop(0.35, "Blue");
gradient.addColorStop(1, "White");
// Установка объекта градиента в качестве цвета заливки контекста.
context.fillStyle = gradient;
// Создаем массив цветов для цветовой модели
var hue = [[255, 0, 0], [255, 255, 0], [0, 255, 0], [0, 255, 255], [0, 0, 255], [255, 0, 255]],
gradient = context.createLinearGradient(0, 0, elem.width, 0);
// Добавляем цвета остановки
for (var i = 0; i <= 5; i++) {
color = 'rgb(' + hue[i][0] + ', ' + hue[i][1] + ', ' + hue[i][2] + ')';
gradient.addColorStop(i * 1 / 6, color);
}
context.createRadialGradient(150, 150, 100, 150, 150, 200);
// (x1,y1,radius1,x2,y2,radius2)
//текст
context.font = "bold 24px Segoe UI";
context.textBaseline = "alphabetic"; // top, bottom, middle,hanging, alphabetic
context.fillText("text", (context.canvas.width - context.measureText("text").width) / 2, 198);
//тень
context.shadowColor = "rgba(255, 0, 0, 1)";
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 50; //Степень размытия
//прозрачность
context.globalAlpha = 0.5;
context.canvas.width
context.canvas.height
}
pingpong
draw
CanvasAnimRect
CanvasDiagramm
SunSistem
Object / Array
var name = {
t:a,
s:x,
r:this.t
} // Создание объекта через блок инициализации.
var name = {} // пустой объект
name.t = a; name.r = x; name["s"]; // Присвоение новых значений свойствам.
var name = new Object();
delete name.t; //удаляет свойство
.hasOwnProperty("") //проверка наличия свойства
.getItem("key");
.setItem("key","value");
.deleteItem("key");
Object.assign(target, source)
Object.create()
Object.defineProperties()
Object.defineProperty()
Object.entries()
Object.freeze()
Object.fromEntries()
Object.getOwnPropertyDescriptor()
Object.getOwnPropertyDescriptors()
Object.getOwnPropertyNames()
Object.getOwnPropertySymbols()
Object.getPrototypeOf()
Object.is()
Object.isExtensible()
Object.isFrozen()
Object.isSealed()
Object.keys()
Object.seal()
Object.setPrototypeOf()
Object.values()
//массивы
var name = Array(1, 2, 3, 4, 5, 6);
.concat()
.copyWithin()
.entries()
.every()
.fill()
.filter()
.find()
.findIndex()
.flat()
.flatMap()
.forEach(value => { console.log(value); }); // перебор элементов массива
.from()
.includes()
.indexOf()
.isArray()
.join() // - преобразует все элементы массива в строки и объединяет их.
// Если метод принимает строковой аргумент, то аргумент станет разделителем вместо запятых.
.keys()
.lastIndexOf()
.length
.map()
.of()
.pop()
.push()
.reduce()
.reduceRight()
.reverse()
.shift()
.slice(,);
.some()
.sort()
.splice(,,);
.toLocaleString()
.toSource()
.toString()
.unshift()
.values()
.split // connect stroke in massive
Array.prototype[@@iterator]()
[1, 2, 3, 4, 5, 6];
name[1];
var name = new Array();
document.write(new Array(4).join('xa'));
function Name(x, y) { // Функция-конструктор для
this.t = x; // создания объектов Name.
this.s = y;
} var name = new Name(x, y); name.t
Name.prototype.r = x; // Метод прототипа
Name.prototype = name // наследование
switch
switch (name) {
case "a": x;
continue;
case "b": y;
break;
default: z;
break;
}
// Оператор многозначного выбора - switch-case (переключатель).
// Предлагаем пользователю ввести число и принимаем ввод от пользователя.
var number = prompt("Введите число 1 или 2:");
// Создаем конструкцию многозначного выбора, переключатель - switch,
// которому в качестве выражения-селектора, передаем переменную - number.
// ВНИМАНИЕ!
// Тип значения выражения селектора и значений постоянных выражений операторов case должны совпадать.
switch (number) { // (number) — выражение-селектор.
// В теле переключателя switch-case, создаем несколько операторов case,
// c постоянными выражениями равными "1" и "2" соответственно.
// Если значение выражения-селектора совпадет с одним из значений постоянных выражений,
// то выполняется тело оператора case, постоянное выражение которого, совпало с выражением-селектора.
case "1": // "1" — постоянное выражение.
{
document.write("Один"); // Ветвь 1
};
break; // Выход из переключателя.
case "2": // "2" — постоянное выражение.
{
document.write("Два"); // Ветвь 2
};
break; // Выход из переключателя.
// Создаем (необязательный) оператор default, тело которого выполняется в случае,
// если значение выражения-селектора не совпадет ни с одним из значений постоянных выражений.
default:
{
document.write("Вы ввели значение отличное от 1 и 2."); // Ветвь 8
};
// Если в переключателе отсутствует оператор default, то управление передается за пределы переключателя switch.
}
switch-case Проваливание
var day = prompt("Введите номер дня недели: 1-2-3-4-5-6-7: ", "");
switch (day) {
case "1":
case "2":
case "3":
case "4":
case "5":
document.write("Этот день недели - Рабочий.");
break;
case "6":
case "7":
{
document.write("Этот день недели - Выходной.");
}
break;
default:
{
document.write("Вы ввели несуществующий день недели.");
}
break;
}
Coffee Maker
var coffeeSize = prompt("Размеры стаканчиков кофе:
1 = Маленький, 2 = Средний, 3 = Большой.
Пожалуйста, сделайте свой выбор:");
var cost = 0;
switch (coffeeSize) {
case "1":
{
cost += 25;
document.write(" img src='coffee.jpg' width='100' height='100' ");
}
break;
case "2":
{
cost += 50;
document.write(" img src='coffee.jpg' width='150' height='150' ");
}
break;
case "3":
{
cost += 75;
document.write(" img src='coffee.jpg' width='256' height='256' ");
}
break;
default:
{
document.write("Неверный выбор.");
}
break;
}
if (cost != 0) {
document.write("Внесите " + cost + " копеек.Спасибо!");
}
else {
coffeeSize();
}
if (сравнение) {} если
else if (сравнение) {}
else {}
name = (сравнение) ? x : y;
if ("t" in name) {} //проверка наличия свойства
// циклические итерации
while (сравнение) {name++; x;} пока
do {x; name++;} while (сравнение);
for (var name = 0; name < 10; name++) {}
for (; ;) {name = x; y;}
for (var property in name) {x(name[property])}
function Name() {}
.arguments // обращение к аргументам функции как к массиву
имя_функции( аргументы );
var name = new Function("аргументы", "тело");
(function () {})(); // немедленно вызываемая анонимная функция
function
Function.caller
Function.displayName
Function.length
Function.prototype
Function.prototype.name
Function.prototype.apply()
Function.prototype.bind()
Function.prototype.call()
Function.prototype.isGenerator()
Function.prototype.toSource()
Function.prototype.toString()
function Name() {x;
return y;}
var Name = function(a, b) {return a + b;}
// перехват ошибок:
throw
try...catch
var name = x;
let name = x;
const name = x;
alert();
prompt(,);
confirm();
parseFloat(); // Kонвертация в вещественное значение
parseInt(); // Kонвертация в целочисленное значение
new String();
typeof
instanceof - оператор для проверки типа объекта
with
Math
this
Number
.NEGATIVE_INFINITY
.anchors[0].name
console.log();
.length
.href = 'новая/ссылка';
.style.color = 'новыйцветтекста';
.style.background = 'новыйбэк';
.style.fontSize = '23px';
.value
.text
.options;
.selectedIndex;
атрибут data-name="value" , .dataset.
Деструктурирующее присваивание // Destructuring_assignment
for (i in array) {} // перебор массива
for (let value of args){} // перебор значений
for (let [key, value] of Object.entries(object1)) { // перебор объекта
console.log(`${key}: ${value}`);
}
генераторы
двоичные данные
типизированные массивы
отражения
прокси
// rest_parameters
function f(a, b, ...theArgs) {
// ...
}
// spread
let obj3 = { ...obj1, ...obj2 };
let array3 = [ ...arr1, ...arr2];
//Symbol()
var mss = "Welcome " + name + name + "!";
let msg = `Welcome ${name + name}!`;
`hello ${who}`
// стрелочные функции
const name = параметры => {};
const name = (a=4,b) => a+b // если параметр "a" не будет указан при вызове функции "a" присвоит себе значение 4.
У стрелочной функции нет своего arguments и this;
class
class Rectangle {
#height = 0;
#width;
constructor(height, width) {
this.#height = height;
this.#width = width;
}
}
class Dog extends Animal {
constructor(name) {
super(name); // call the super class constructor and pass in the name parameter
}
speak() {
console.log(`${this.name} barks.`);
}
}
class Lion extends Cat {
static methodName() { ... }
speak() {
super.speak();
console.log(`${this.name} roars.`);
}
}
import
import defaultExport from "module-name";
import * as name from "module-name";
import { export1 } from "module-name";
import { export1 as alias1 } from "module-name";
import { export1 , export2 } from "module-name";
import { foo , bar } from "module-name/path/to/specific/un-exported/file";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export1 [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";
var promise = import("module-name");
export
// Exporting individual features
export let name1, name2, …, nameN; // also var, const
export let name1 = …, name2 = …, …, nameN; // also var, const
export function functionName(){...}
export class ClassName {...}
// Export list
export { name1, name2, …, nameN };
// Renaming exports
export { variable1 as name1, variable2 as name2, …, nameN };
// Exporting destructured assignments with renaming
export const { name1, name2: bar } = o;
// Default exports
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };
// Aggregating modules
export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default } from …;
Map // объект без прототипа , любые ключи
let myMap = new Map();
let keyString = 'a string',
keyObj = {},
keyFunc = function() {};
// setting the values
myMap.set(keyString, "value associated with 'a string'");
myMap.set(keyObj, 'value associated with keyObj');
myMap.set(keyFunc, 'value associated with keyFunc');
myMap.size; // 3
.clear()
.delete()
.entries()
.forEach()
.get()
.has()
.keys()
.set()
.values()
Map.prototype[@@iterator]()
Set // массив ,значения не повторяются
let mySet = new Set();
mySet.add(1); // Set [ 1 ]
mySet.add(5); // Set [ 1, 5 ]
mySet.add(5); // Set [ 1, 5 ]
mySet.add('some text'); // Set [ 1, 5, 'some text' ]
let o = {a: 1, b: 2};
mySet.add(o);
mySet.add({a: 1, b: 2}); // o is referencing a different object so this is okay
.add()
.clear()
.delete()
.entries()
.forEach()
.has()
.values()
Set.prototype[@@iterator]()
WeakMap // ключи только объекты
let wm2 = new WeakMap();
let o1 = {},
o2 = function() {},
o3 = window;
wm2.set(o1, o2); // a value can be anything, including an object or a function
wm2.set(o3, undefined);
wm2.set(wm1, wm2); // keys and values can be any objects. Even WeakMaps!
.delete()
.get()
.has()
.set()
WeakSet
var ws = new WeakSet();
var foo = {};
var bar = {};
ws.add(foo);
ws.add(bar);
WeakSet.prototype.add()
WeakSet.prototype.delete()
WeakSet.prototype.has()
Promise
function myAsyncFunction(url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.onload = () => resolve(xhr.responseText);
xhr.onerror = () => reject(xhr.statusText);
xhr.send();
});
}
Promise.all()
Promise.allSettled()
Promise.prototype.catch()
Promise.prototype.finally()
Promise.prototype.then()
Promise.race()
Promise.reject()
Promise.resolve()
stylelint-no-unsupported-browser-features
eslint-plugin-compat
в теге script атрибут defer / async
a href="javascript:alert('Hello')">Ссылка /a>
событие в тэге - onclick="buttonClickHandler()">
function User(name) {
// Если конструктор вызван без ключевого слова new, this это window.
// в таком случае вызывается этот же конструктор но с ключевым словом new
if (!(this instanceof User)) {
return new User(name);
}
this.name = name;
}
Window
window.requestAnimationFrame
setTimeout(x, 5000); // запустит x через 5сек
setInterval(x, 1000); // будет запускать x каждую 1секунду
clearTimeout(name); // отменяет запуск
clearInterval(name); // останавливает setInterval
document.location // весь url
document.location.protocol // протокол
document.location.host // имя хоста
document.location.pathname // путь к запрашиваемому ресурсу
document.location.search // строка запроса (после знака вопроса)
document.documentElement
document.documentElement.clientWidth // ширина окна
document.documentElement.clientHeight // высота окна
navigator
.appName // Название веб браузера.
.appVersion // Номер версии или другая информация о браузере
.userAgent // строка, которую браузер посылает в HTTP заголовке USER-AGENT
.appCodeName // Кодовое имя браузера.
.platform // Аппаратная платформа, на которой работает браузер.
history.forward()
.backward()
window.screenLeft
window.screenTop
window.innerWidth // ширина окна
window.innerHeight // высота окна
window.getComputedStyle(element, null)[styleName] // получение значений стилей
screen.width // ширина экрана
screen.height // высота экрана
var name = window.open("window.html", "Window Name", "width=400,height=400,status=yes,resizable=no");
name.close();
---
селектор.nodeType
// Основные типы узлов
// Константа nodeType | Значение nodeType
// ---------------------------------------------------
// Node.ELEMENT_NODE | 1
// Node.ATTRIBUTE_NODE | 2*
// Node.TEXT_NODE | 3
// Node.CDATA_SECTION_NODE | 4
// Node.ENTITY_REFERENCE_NODE | 5*
// Node.ENTITY_NODE | 6*
// Node.PROCESSING_INSTRUCTION_NODE| 7
// Node.COMMENT_NODE | 8
// Node.DOCUMENT_NODE | 9
// Node.DOCUMENT_TYPE_NODE | 10
// Node.DOCUMENT_FRAGMENT_NODE | 11
// Node.NOTATION_NODE | 12*
// ---------------------------------------------------
Кэширование изображений
var images = []
function preload() {
for (i = 0; i < preload.arguments.length; i++) {
images[i] = new Image()
images[i].src = preload.arguments[i]
}
}
preload(
"images/frame1.jpg",
"images/frame2.jpg",
"images/frame3.jpg",
"images/frame4.jpg",
"images/frame5.jpg"
)
или
(new Image()).src = "images/button-hover.jpg";
операторы
= assigns a value
Оператор присвоения "=" предназначен для присвоения определенного значения переменной.
== checks a value to another
Оператор равенства "==" предназначен для сравнения значений двух переменных,
при этом необходимо помнить о следующих правилах:
1. если одно значение null а другое undefined - значения равны.
2. если одно значение число, а второе строка, то строка преобразоваться в число и производиться сравнение.
3. если одно значение true оно преобразуется в 1, если значение false оно преобразоваться в 0.
=== checks a value & type
Идентичность - требует совпадения типа и значения переменной,
когда для равенства достаточно только совпадающих значений.
Оператор идентичности "===" предназначен для проверки значений двух переменных на идентичность,
при этом необходимо помнить о следующих правилах:
1. если значения имеют разные типы они не идентичны.
2. если значения являются числами имеют одинаковые значения и не являются значения NaN - они идентичны.
3. если две строки имеют одинаковую длину и содержат одни и те же символы - они идентичны.
4. два одинаковых логических значения идентичны.
!= Оператор неравенства "!=" возвращает противоположное значение оператора равенства.
!== Оператор неидентичности "!==" возвращает противоположное значение оператора идентичности.
< , > , <= , >= Операторы сравнения .
Сравнение строк производиться посимвольно для числовых значений каждого символа из кодировки Unicode.
Символ в верхнем регистре считается меньше символа в нижнем регистре.
Например: A - code (41 Hex)
a - code (61 Hex)
& bitwise AND
^ bitwise XOR
| bitwise OR
&& logical AND . Логическое И (&&) - возвращает true тогда и только тогда когда оба операнда равны true.
|| logical OR . Логическое ИЛИ (||) - возвращает true, если первый или второй операнд (или оба) равны true.
+string // конвертация строчного в числовое значение
Конкатенация (лат. concatenatio «присоединение цепями; сцепле́ние») —
операция склеивания объектов линейной структуры, обычно строк.
// Конкатенация
// Произошло неявное преобразование значения типа Number в тип String.
// Значение в переменной (a) неявно преобразуется в строку (т.е в значение типа String)
// и далее над этой строкой-числом производится операция конкатенации.
document.write(str + a);
// Произошло неявное преобразование значения типа String в тип Number.
// Значение в переменной str неявно преобразуется в число (т.е в значение типа Number)
// и далее над этим числом производится арифметическая операция.
document.write(str - a);
document.write(str * "2");
document.write(str / "2");
Логический тип данных.
Данные хранящиеся в переменной булевого типа могут принимать два значения:
истина (true) и ложь (false).
Часто истина представляется единицей, а ложь — нулем.
Null - это тип данных, указывающий на отсутствие объекта.
В JavaScript null не является «ссылкой на несуществующий объект»
или «нулевым указателем», как в некоторых других языках.
Null - значение, аналогичное понятиям: «ничего» или «значение неизвестно».
undefined - это тип данных, который используется для переменных или свойств объекта,
значения для которых не существует или оно не присвоено.
Единственным значением неопределенного типа, которое может иметь переменная,
является значение undefined.
document.write(...) — метод, выводящий на страницу переданные ему аргументы (параметры).
Аргументов может быть любое количество, и они могут быть любых типов,
при выводе значения аргументов преобразуются в строки.
Функция document.writeln(), аналогична document.write(),
но добавляет в конце своего вывода перевод строки.
(Не во всех браузерах работает корректно.)
Арифметические операторы:
var a = 9;
var b = 5;
var result;
// Сложение (+)
result = a + b; // в данном случае + арифметическое сложение.
document.write("a + b = " + result); // в данном случае оператор + выполняет операцию конкатенации.
// Вычитание (-)
result = a - b; // в случае если a или b нечисловые, оператор пытается преобразовать их в числа.
document.write("a - b = " + result);
// Умножение (*)
result = a * b;
document.write("a * b = " + result);
// Деление (/)
result = a / b;
document.write("a / b = " + result); // деление на 0 дает +/- бесконечность. 0/0 дает NaN.
a % b; Деление c остатком (Деление по модулю) - это операция,
при которой возвращаемое значение является остатком от деления.
В отличие от некоторых других языков, оператор "+" делает конкатенацию,
если хотя бы один операнд - строка, причем, не обязательно первый.
var a = -8;
var string = "10";
// Унарный минус (-)
result = -a; // Операция смены знака на противоположный.
document.write("-a = " + result);
// Унарный плюс (+)
// не изменяет знака при применении к числовому типу (ничего не происходит).
result = +a;
document.write("+a = " + result);
// Унарный плюс (+)
// при применении к строковому типу, преобразовывает его в числовой.
result = +string + a;
document.write("+string + a = " + result);
Инкремент — операция, во многих языках программирования используемая
для увеличения значения переменной на единицу.
Имеется префиксная и постфиксная форма инкремента.
Префиксный инкремент выполняется перед использованием переменной.
Постфиксный инкремент выполняется после использования переменной.
var a = 9;
Постфиксный инкремент
document.write(a); // выведет 9
a++;
document.write(a); // выведет 10
document.write(a++); // выведет 10
document.write(a); // выведет 11
Префиксный инкремент
document.write(a); // выведет 11
++a;
document.write(a); // выведет 12
document.write(++a); // выведет 13
document.write(a); // выведет 13
Декремент — операция, во многих языках программирования используемая
для уменьшения значения переменной на единицу.
Имеется префиксная и постфиксная форма декремента.
Префиксный декремент выполняется перед использованием переменной.
Постфиксный декремент выполняется после использования переменной.
var a = 9;
Постдекремент
document.write(a); // выведет 9
a--;
document.write(a); // выведет 8
document.write(a--); // выведет 8
document.write(a); // выведет 7
Предекремент
document.write(a); // выведет 7
--a;
document.write(a); // выведет 6
document.write(--a); // выведет 5
document.write(a); // выведет 5
Специальные простые операторы
a += 3; // a = a + 3;
a -= 3; // a = a - 3;
a *= 3; // a = a * 3;
a /= 3; // a = a / 3;
Тернарная условная операция.
Тернарный (троичный) оператор [?:] .
Тернарный оператор [?:], является сокращенной формой конструкции if ... else.
[?:] - включает в себя три операнда - ( условие ? Если условие ИСТИННО : Если условие ЛОЖНО )
Алгоритм работы тернарной операции: (логическое выражение) ? выражение 1 : выражение 2
1. Вычисляется логическое выражение (условие).
2. Если логическое выражение истинно, то вычисляется значение выражения выражение 1,
в противном случае — значение выражения выражение 2.
3. Вычисленное значение возвращается.
var a = 1, b = 2, max = 0;
// Переменной max, присваиваем возвращаемое значение тернарного оператора.
max = (a > b) ? a : b; // ЕСЛИ: (a > b) ТО: вернуть a ИНАЧЕ: вернуть b;
document.write(max);
---
var a = 1, b = 2, c = -5, max = 0;
max = a > b ? c = a : c = b; // сначала с = а, а только потом max = c
document.write(max);
---
var quantity = 10; // Количество единиц товара.
var price = 100; // Цена за единицу товара.
var discount = 0.75; // Скидка на общую стоимость - 25%.
var cost; // Общая стоимость.
// ЕСЛИ: Купили 10 единиц товара и больше. ТО: предоставить скидку в 25%. ИНАЧЕ: Скидку не предоставлять.
cost = quantity >= 10 ? quantity * price * discount : quantity * price;
document.write("Общая стоимость товара составляет: " + cost + " у.е.");
---
var str = "Угадайте задуманный цвет с пяти попыток.";
var maxAttempt = 5; // Допустимое количество попыток.
var attempt = 0; // Счетчик попыток.
var color = "red"; // Задуманный цвет.
while (attempt < maxAttempt) {
attempt++;
value = prompt(str + " Попытка " + attempt, "");
if (value == null) {
break;
}
if (value != color) {
str = "Вы не угадали.";
continue;
}
document.write("Поздравляем, Вы угадали с " + attempt + " попытки!");
break;
}
document.write("Конец игры!");
---
var a;
for (; ;) {
a = prompt("Введите направление l/r/t/b");
switch (a) {
case 'l': // 'l' - охраняющее условие 1.
{
document.write("на лево"); // охраняемая команда.
continue;
}
case 'r': // 'r' - охраняющее условие 2.
{
document.write("на право"); // охраняемая команда.
continue;
}
case 't': // 't' - охраняющее условие 3.
{
document.write("вверх"); // охраняемая команда.
continue;
}
case 'b': // 'b' - охраняющее условие 4.
{
document.write("вниз"); // охраняемая команда.
continue;
}
default:
{
exit = confirm("Выйти?");
if (exit) {
document.write("Вы завершили выполнение.");
break;
}
else {
continue;
}
}
}
break; // Прерывание цикла.
}
Метки.
Инструкция метки (label) используется вместе с break или continue для альтернативного выхода из цикла.
Оно добавляется перед блочным выражением в качестве ссылки, которая может быть использована в дальнейшем.
Вместо оператора goto.
Label: for (var j = 0; j < 2; j++) {
for (var i = 0; i < 2; i++) {
var input = prompt("Введите любой текст, чтобы выйти нажмите отмена", '');
if (input == null)
//break Label; //выйти сразу из 2-х циклов.
continue Label;
document.write(input + " ");
}
Label1: for (var i = 0; i < 2; i++) {
var input = prompt("Введите любой текст, чтобы выйти нажмите отмена", '');
if (input == null)
//break Label1; //выйти сразу из 2-х циклов.
continue Label1;
document.write(input + " ");
}
document.write("br");
}
document.write('Готово!');
---
Calculator
function add(a, b) {
return a + b;
}
function sub(a, b) {
return a - b;
}
function mul(a, b) {
return a * b;
}
function div(a, b) {
return a / b;
}
var operand1 = prompt("Введите первое число: ");
var sign = prompt("Введите знак арифметической операции: + - * /");
var operand2 = prompt("Введите второе число: ");
var result = undefined;
operand1 = parseInt(operand1);//глобальный метод parseInt
operand2 = parseInt(operand2);//глобальный метод parseInt
switch (sign) {
case "+":
result = add(operand1, operand2);
break;
case "-":
result = sub(operand1, operand2);
break;
case "*":
result = mul(operand1, operand2);
break;
case "/":
result = div(operand1, operand2);
break;
default:
document.write(sign" - не является знаком арифметической операции.");
}
if (result != undefined)
document.write(operand1 + " " + sign + " " + operand2 + " = " + result);
---
При вызове функции создается специальный масив содержащий
в себе аргументы, которые были переданы при вызове.
У этого массива есть свойство length, в котором хранится
количество аргументов переданых функции.
function max(a, b, c) { //функция показывает максимальное значение аргумента, который передан при вызове
var maxValue = Number.NEGATIVE_INFINITY; //присваеваем изначально минус бесконечность
//перебираем циклом аргументы
for (i in arguments){
if (arguments[i] > maxValue) maxValue = arguments[i];
}
return maxValue;
}
var res = max(-33, 33, 777, -666, -22, 888);
document.write("Максимальное значение аргументов функции = " + res);
---
Рекурсия
function f(counter) {//функция принимает параметр counter
counter--;//уменшается параметр на 1
document.write("Первая половина метода: " + counter);
if (counter != 0)//проводим проверку если counter не равен 0
f(counter);//вызываем функцию заново и уменьшаем counter еще раз
//после того, как условие не выполняется выводится следующее сообщение
document.write("Вторая половина метода: " + counter);
}
f(3);
---
CallBack Function
var add = function (a, b) {//переменная с функцией
return a + b; //выполняет сложение
};
var sub = function (a, b) {//переменная с функцией
return a - b; //выполняет вычитание
};
function show(callBackFunction, a, b) {//callBackFunction - обозначает, что при вызове функции show
//должны передать еще одну функцию, CallBack функцию. Функция show сама решит, когда нужно запустить CallBack Function
var result = callBackFunction(a, b);
document.write(result);
};
show(add, 10, 20);//если передать в callBackFunction функцию add
show(sub, 50, 30);//если передать в callBackFunction функцию sub
---
Циклическая конструкция for in, используется для перебора
элементов массива или перебора свойств объекта.
Принцип работы конструкции:
for ( переменная_итерации in массив_или_обьект) { ...тело конструкции ...}
var house = {
roof: " img src='Images/Roof.gif'/> br/>",
secondFloor: " img src='Images/SecondFloor.gif'/> br/>",
firstFloor: " img src='Images/FirstFloor.gif'/> br/>",
basement: " img src='Images/Basement.gif'/> br/>",
address: "UK. London. Muswell Hill. N10"
}
// Перебор значений свойств в обьекте - house
for (var property in house) { // создание той переменной, которая будет перебирать свойства в объекте house
document.write(house[property]); //выводим на экран переменную которая перебирала свойство
}
---
Конструкция if(имя_свойства in объект) -
используется для проверки наличия свойства у объекта.
var house = {
roof: " img src='Images/Roof.gif'/> br/>",
// thirdFloor: отсутствует.
secondFloor: " img src='Images/SecondFloor.gif'/> br/>",
firstFloor: " img src='Images/FirstFloor.gif'/> br/>",
basement: " img src='Images/Basement.gif'/> br/>",
address: "UK. London. Muswell Hill. N10"
}
// Строительство дома.
document.write(house.roof);
// ЕСЛИ: В объекте house имеется планировка третьего этажа - thirdFloor,
if ("thirdFloor" in house) { // ТО: Строим третий этаж с планировкой - thirdFloor.
document.write(house["thirdFloor"]);
}
else { // Иначе: Строим третий этаж с планировкой - secondFloor.
document.write(house["secondFloor"]);// или house.secondFloor
}
document.write(house.secondFloor);
document.write(house.firstFloor);
document.write(house.basement);
document.write(house.address);
---
delete - оператор который способен удалить свойство в обьекте,
для этого необходимо использовать его следующим образом:
delete имя_обьекта.имя_свойства;
При обращении к свойству впоследствии будет возвращаться undefined.
var house = {
roof: " img src='Images/Roof.gif'/> br/>",
secondFloor: " img src='Images/SecondFloor.gif'/> br/>",
firstFloor: " img src='Images/FirstFloor.gif'/> br/>",
basement: " img src='Images/Basement.gif'/> br/>",
address: "UK. London. Muswell Hill. N10"
}
// Строительство дома.
if ("secondFloor" in house) {
// Удаление свойства secondFloor из объекта house.
delete house.secondFloor;
}
for (element in house) {
document.write(house[element]);
}
---
var vacation = {
turkey: 500,
egypt: 400,
spain: 100
}
vacation.calc = function (people, days, country)
{
var result = people * days * this[country];
return result;
}
document.write(vacation.calc(2, 10, "spain"));
---
Конструкторы и Прототипы
Конструктор Function()
Конструктор Function позволяет динамически создавать и компилировать анонимные функции.
Конструктор Function принимает неограниченное количество параметров, последний параметр
всегда является телом создаваемой функции, параметры, которые передаются в начале
списка аргументов Function, являются входными параметрами для генерируемой функции.
// Создаем функцию, которая принимает два параметра с именем x и y и тело, которое возвращает их сумму.
var func = new Function("x", "y", "return x + y;");
var result = func(20, 10);
alert(result);
var func2 = new Function("alert('Hello!!!')"); // создаем функцию без параметров, которая отображает модальное окно
func2();
---
Функция конструктор - это функция, которая создает объекты по определенному шаблону (классу).
Конструкторы должны вызываться после оператора new.
Ключевое слово new создает пустой объект, который в конструкторе будет доступен через ключевое слово this
function Point(x, y) { // Функция-конструктор для создания объектов Point.
this.x = x;
this.y = y;
}
var leftTop = new Point(0, 0); // Создание трех экземпляров класса Point
var topPoint = new Point(15, 30);
var rightBottom = new Point(30, 30);
document.write(leftTop.x + " , " + leftTop.y); // Вывод координат созданых точек
---
function Human(name) { // Функция-конструктор для создания объектов Human.
this.firstName = name; // свойство
this.sayHello = function () { // метод - свойство объекта, которое содежит значение в виде функции.
document.write("Hello! My name is " + this.firstName);
}
}
var h = new Human("Homer"); // Создание двух экземпляров типа Human
var r = new Human("Rocky");
h.sayHello(); // Вызов метода SayHello() на созданых обьектах.
r.sayHello();
---
var Friend = function (mood) {
this.mood = mood;
// если настроение "хорошее"
if (mood === "nice") {
this.talk = function () {
alert("Hello what's up?");
};
}
// если настроение "плохое"
else if (mood === "bad") {
this.talk = function () {
alert("Sorry, I don't want talk with you.");
};
}
// если настроение не определено
else {
this.talk = function () {
alert("Hi");
};
}
}
var friendMood = prompt("Type friend mood (nice/bad):");
var David = new Friend(friendMood);
David.talk();
---
function Point(x, y) {
// свойства экземпляра
this.x = x;
this.y = y;
// метод экземпляра
this.print = function () {
document.write("(" + this.x + ", " + this.y + ")");
}
}
// свойство функции конструктора (аналог статических свойств).
Point.MaxPointCount = 100;
// Метод функции-конструктора (аналог статическгого метода).
Point.getOrigin = function () {
return new Point(0, 0) // this использовать недопустимо.
}
// создание экземпляров и работа с свойствами и методами экземпляров.
var p1 = new Point(100, 200);
p1.x = 300;
p1.y = 400;
p1.print();
var p2 = new Point(100, 200);
p2.print();
// работа с свойством и методом функции-конструктора.
Point.MaxPointCount = 10;
Point.getOrigin().print();
---
function Rectangle(w, h) {
this.width = w; // свойства
this.height = h;
// метод
// недостатком данного метода, является то, что он будет дублироваться во всех объектах созданных через функцию
// Rectangle. Метод не будет меняться от объекта к объекту но при это будет занимать память, что не оптимально.
this.getArea = function () {
return this.width * this.height;
}
}
var rect = new Rectangle(100, 50);
document.write("Площадь прямоугольника " + rect.getArea());
---
function Rectangle(w, h) {
this.width = w; // свойства
this.height = h;
}
// Метод прототипа Rectangle будет доступен каждому экземпляру, но храниться будет в прототипе
// соответственно занимать меньше места чем если бы метод принадлежал каждому экземпляру.
Rectangle.prototype.getArea = function () {
return this.width * this.height;
}
var rect = new Rectangle(100, 50);
document.write("Площадь прямоугольника " + rect.getArea());
// Свойство прототипа, будет доступно всем экземплярам
Rectangle.prototype.name = "RECTANGLE";
var rect1 = new Rectangle(100, 50);
var rect2 = new Rectangle(30, 150);
document.write("Площадь прямоугольника 1 " + rect1.getArea());
document.write("Площадь прямоугольника 2 " + rect2.getArea());
document.write("Имя прямоугольника 1 " + rect1.name);
document.write("Имя прямоугольника 2 " + rect2.name);
// При попытке смены значения, которое было унаследовано от прототипа, в объекте будет
// создана копия свойства (свойство прототипа не изменится).
// Значение в прототипе может быть измененно только через операцию Rectangle.prototype.name
rect1.name = "first rectangle";
---
// Создаем несколько обьектов используя различные конструкторы
var MyArray = new Array(10);
var MyDate = new Date();
var MyString = new String("Some string value");
var MyObj = new Object();
var MyFunc = new Function("x", "y", "return x + y;");
var MyCtor = function (x, y) {
this.x = x;
this.y = y;
}
var MyCtorObject = new MyCtor(12, 3);
// Создаем функцию для вывода содержимого свойства constructor аргумента
function showCtor(obj, name) {
document.write("Конструктор обьекта " + name + " это " + obj.constructor);
}
showCtor(MyArray, "MyArray");
showCtor(MyDate, "MyDate");
showCtor(MyString, "MyString");
showCtor(MyObj, "MyObj");
showCtor(MyFunc, "MyFunc");
showCtor(MyCtorObject, "MyCtorObject");
// Вызываем конструктор с помощью которого был создан объект MyDate
var someNewObject = new MyDate.constructor();
document.write("Значение обьекта someNewObject: " + someNewObject);
---
function Rectangle(w, h) {
this.width = w;
this.height = h;
}
Rectangle.prototype.getArea = function () {
return this.width * this.height;
}
// переопределение метода toString из Object
Rectangle.prototype.toString = function () {
return "Прямоугольник W:" + this.width + " H:" + this.height;
}
// переопределение метода valueOf из Object
Rectangle.prototype.valueOf = function () {
return this.getArea();
}
var rect1 = new Rectangle(100, 200);
var rect2 = new Rectangle(400, 300);
document.write(rect1); // по умолчанию вызывается метод valueOf()
document.write(rect2.toString());
document.write("values");
document.write(rect1.valueOf());
document.write(rect2.valueOf());
document.write(rect2 + rect1);
Rectangle.prototype.name = "RECTANGLE";
var rect1 = new Rectangle(100, 200);
// hasOwnProperty метод из Object с его помощью можно проверить существует ли
// свойство у конкретного объекта не проверяя наличие свойств у прототипа.
document.write("hasOwnProperty('width') " + rect1.hasOwnProperty("width"));
document.write("hasOwnProperty('name') " + rect1.hasOwnProperty("name"));
// с помощью ключевого слова in можно проверить наличие свойства у объекта включая свойства прототипов.
document.write("'width' in rect1 " + ("width" in rect1));
document.write("'name' in rect1 " + ("name" in rect1));
// объекты имеют одинаковые значения.
var rect1 = new Rectangle(100, 200);
var rect2 = new Rectangle(100, 200);
// оператор сравнения проверяет равенство ссылок а не равенство значений свойств объектов
var res = rect1 == rect2;
document.write("rect1 == rect2 -> " + res);
var rect3 = rect1; // rect1 и rect3 ссылки на один и тот же объект в памяти
res = rect3 == rect1;
document.write("rect3 == rect1 -> " + res);
// метод для проверки равенства объектов
Rectangle.prototype.equals = function (otherObj) {
if (this.width === otherObj.width && this.height === otherObj.height) {
return true;
}
return false;
}
// проверка равенства объектов с помощью метода equals
var res = rect1.equals(rect2);
document.write("rect1 == rect2 -> " + res);
// Метод для сравнения объеков.
// Если текущий объект больше чем тот который передан в параметры - возвращаем значение > 0
// Если текущий объект меньше чем тот который передан в параметры - возвращаем значение < 0
// Если объекты равны возвращаем 0
Rectangle.prototype.compareTo = function (otherObject) {
if (this.getArea() > otherObject.getArea()) {
return 1;
}
else if (this.getArea() < otherObject.getArea()) {
return -1;
}
else {
return 0;
}
// или таким способом
return this.getArea() - otherObject.getArea();
}
// объекты имеют одинаковые значения.
var rect1 = new Rectangle(1000, 20);
var rect2 = new Rectangle(1000, 20);
// при наличии метода valueOf(), который возвращает простое значение операторы сравнения
// будут использовать это значение для определения какой объект больше, а какой меньше
// если реализация метода valueOf() не возможна, то в таком случае, рекомендуется реализовать метод compareTo(a)
if (rect1 > rect2) {
document.write("Объект rect1 > rect2");
}
if (rect1 < rect2) {
document.write("Объект rect1 < rect2");
}
if (rect1 <= rect2) {
document.write("Объект rect1 <= rect2");
}
if (rect1 >= rect2) {
document.write("Объект rect1 >= rect2");
}
if (rect1 == rect2) {
document.write("Объект rect1 == rect2");
}
if (rect1 != rect2) {
document.write("Объект rect1 != rect2");
}
document.write("использование compareTo()");
if (rect1.compareTo(rect2) > 0)/*rect1 > rect2*/ {
document.write("Объект rect1 > rect2");
}
if (rect1.compareTo(rect2) < 0)/*rect1 < rect2*/ {
document.write("Объект rect1 < rect2");
}
if (rect1.compareTo(rect2) <= 0)/*rect1 <= rect2*/ {
document.write("Объект rect1 <= rect2");
}
if (rect1.compareTo(rect2) >= 0)/*rect1 >= rect2*/ {
document.write("Объект rect1 >= rect2");
}
if (rect1.compareTo(rect2) == 0)/*rect1 == rect2*/ {
document.write("Объект rect1 == rect2");
}
if (rect1.compareTo(rect2) != 0)/*rect1 != rect2*/ {
document.write("Объект rect1 != rect2");
}
---
Наследование
function Human(name) { // базовая функция-конструктор
this.name = name;
this.talk = function () { document.write("Hello My Name is " + this.name) }
}
function Student(name) { // производная функция конструктор
this.name = name;
this.school = "CBS school";
}
function Worker(name) {
this.name = name;
this.speciality = "Software developer";
}
var human = new Human("name"); // Создаем экземпляр родителя
//human.talk();
Student.prototype = human; // наследуем Student и Worker от Human устанавливая функцию как прототип.
Worker.prototype = human;
Worker.talk = function () { document.write("Привет мое имя " + this.name) }
// переопределение метода из базовой функции-конструктора (override).
var Alex = new Student("Alexander");
var Andrew = new Worker("Andrew");
Alex.talk();
document.write(Alex.school);
Andrew.talk();
document.write(Andrew.speciality);
---
instanceof - оператор для проверки типа объекта
var x = new Array(10);
if (x instanceof Array) {
alert("x is array");
}
---
typeof - С помощью оператора typeof можно получить строку указывающую тип операнда.
Оператор typeof может быть удобен для того что бы отличить объект от базового типа.
var test = "hello";
document.write(typeof test);
var test2 = 123;
document.write(typeof test2);
var test3 = true;
document.write(typeof test3);
var test4 = new Array();
document.write(typeof test4);
var test5 = new Date();
document.write(typeof test5);
document.write(typeof test5.toString);
---
function printMessage(message) {
if (typeof message != "string") { // проверка типа параметра функции
alert("Параметр должен быть строкового типа!");
}
else {
document.write(message);
}
}
printMessage(new Array());
printMessage("Hello world");
---
function Box(x, y, z, w) {
this.height = x;
this.width = y;
this.depth = z;
this.material = w;
}
Box.prototype.volume = function () {
return this.height * this.width * this.depth;
}
Box.prototype.Equals = function(otherObj){
return this.material === otherObj.material;
}
var box1 = new Box(15, 21, 13, "steel");
var box2 = new Box(20, 20, 13, "steel");
document.write(box1.volume() + ", " + box2.volume() + ", ");
document.write(box1.Equals(box2));
---
function Human(x, y){
this.name=x;
this.age=y;
}
var alex = new Human("Alex", 23);
var dima = new Human("Dima", 33);
var roman = new Human("Roman", 26);
var victor = new Human("Victor", 43);
var mike = new Human("Mike", 29);
var arr = [alex, dima, roman, victor, mike]
arr.sort(function (a, b) {
if (a.age > b.age) { return 1;}
if (a.age < b.age) { return -1;}
return 0;
});
for(i = 0; i < arr.length; i++){
document.write(arr[i].name + " - " + arr[i].age + " br>");
}
---
(function () {// Определяем анонимную функцию.
// Отсутствие имени означает отсутствие глобального имени
// Тело функции
// здесь можно объявлять любые переменные - это не приведет к созданию глобальных переменных
var message = "Hello from module3"; // переменная не глобальная
alert(message);
})(); // конец определения функции и ее вызов.
---
window.onload = function (){
var getId = function (id){return document.getElementById(id)}
var getP = document.getElementsByTagName("p"); // получился массив
var getL = document.getElementsByTagName("a"); // получился массив
var perebor = function(get){
for (var i=0; i < get.length; i++){
get[i].style.border = "1px solid red";
}
}
getId("buttonP").onclick = function () {perebor(getP)}
getId("buttonL").onclick = function () {perebor(getL)}
getId("buttonD").onclick = function () {
getId("test_div").style.border = '1px solid red';
}
}
---
var parag = {}
parag.getP = document.getElementsByTagName("p");
parag.perebor = function(){
for (var i=0; i < parag.getP.length; i++){
parag.getP[i].textContent = 'PARAGRAPH';
}
}
parag.perebor();
---
// childNodes - получение всех дочерних узлов.
for (var i = 0; i < e.childNodes.length; ++i) {
var temp = e.childNodes[i];
// если найденный узел не элемент то пропустить его
if (temp.nodeType != 1) {
continue;
}
e.childNodes[i].style.color = "red";
}
var div1 = document.getElementById("div1");
var p1 = document.createElement("p");
p1.textContent = "Paragraph 1";
div1.appendChild(p1);
var p2 = document.createElement("p");
p2.textContent = "Paragraph 2";
document.body.insertBefore(p2, div1);
// установка атрибута
a1.setAttribute("href", "http://edu.cbsystematics.com");
// удаление атрибута
a2.removeAttribute("href");
// чтение атрибута
alert(a3.getAttribute("href"));
---
function sortchildren(e) {
if (typeof e == "string") e = document.getElementById(e);
// Преобразовываем дочерние элементы в массив
var children = [];
for (var x = e.firstChild; x != null; x = x.nextSibling)
if (x.nodeType == 1 /* Node.ELEMENT_NODE */) children.push(x);
// сортировка
children.sort(function (n, m) { // функция сравнения.
var s = n.firstChild.data; // текст узла n
var t = m.firstChild.data; // текст узла m
if (s < t) return -1; // n перед m
else if (s > t) return 1; // n после m
else return 0; // n и m равны
});
// Добавляем дочерние элементы обратно в родительский узел.
// Когда добавляется узел, который уже существует в документе, он автоматически
// удаляется со своей старой позиции и вставляется в новую.
for (var i = 0; i < children.length; i++) e.appendChild(children[i]);
}
create a paragraph
pattern.exec
svetofor
Ugadai random number
Tooltip
Calculator
