Skip to content

JS

Jump to bottom
Vital-jan edited this page Mar 21, 2020 · 1 revision

https://bakhirev.biz/book/#dcbzy – сюрреализм на js
https://babeljs.io/ - перекодировка в ES5
www.npmjs.com
codewars.com – задачи по js

1. если одно значение null а другое undefined – значения равны.
2. если одно значение число, а второе строка, то строка преобразоваться в число и производиться сравнение.
3. если одно значение true оно преобразуется в 1, если значение false оно преобразоваться в 0.

Оператор идентичности “===” предназначен для проверки значений двух переменных на идентичность,
при этом необходимо помнить о следующих правилах:

1. если значения имеют разные типы они не идентичны. 2. если значения являются числами имеют одинаковые значения и не являются значения NaN – они идентичны. 3. если две строки имеют одинаковую длину и содержат одни и те же символы – они идентичны. 4. два одинаковых логических значения идентичны.

> Условие switch

switch (number) {
case “1”: { document.write(“Один”); };
break;
case “2”: { document.write(“Два”); };
break;
default: { document.write(“Вы ввели значение отличное от 1 и 2.”);};
}

Math.floor() – Округляет вниз
Math.ceil – Округляет вверх
Math.round – Округляет до ближайшего целого
Math.sqrt(x) – Корень из х
Math.pow(x, exp) – Возводит число в степень
Math.max(a, b, c…) – Возвращает наибольший из списка аргументов
Math.min(a, b, c…) – Возвращает наименьший из списка аргументов
Math.random() – Возвращает псевдослучайное число в интервале [0,1) – то есть между 0 (включительно) и 1 (не включая). Генератор случайных чисел инициализуется текущим временем.

typeof variable – возвращает тип переменной.
isNaN()

c = parseInt(str); // – переводит строку в числовой формат integer, игнорируя все знаки в строке после первого не числа
d = parseFloat(str); // – переводит строку в вещественный числовой формат, игнорируя все знаки в строке после первого не числа (кроме точки)

.toString(); перевод числа в строку
.toFixed(n) – переводит число в строку с n знаков после запятой
+variable – переводит в число
.length – длина строки

.charCodeAt() – возвр. код символа
charCodeFrom(a,b,…,c) – возвращает строку из указанных кодов символа

.charAt(i) – доступ к i-му символу строки // нумерация строк с 0!!!
.toUpperCase
.toLowerCase

.indexOf(substring, pos);
.lastIndexOf(searchSubstring); – поиск с конца строки

.substring(start [, end]) возвращает подстроку с позиции start до, но не включая end.
.substr(start [, length]) возвращает подстроку с позиции start длиной length символов
.slice(start [, end]) возвращает часть строки от позиции start до, но не включая, позиции end. Отличие substring и slice в работе с отрицательными значениями

str.replace(/\s+/g, ’’) – удалить пробелы

> Массивы
let phonesArr = [];
var numbers = new Array(1, 2, 3);
var digits = new Array(5);

.push(a, b, c) – добавить в конец
.unshift(a, b, c) – добавить в начало
.shift() – удалить первый (без аргументов)

.splice(<нач.позиция>,<сколько удалить>[,<что вставить>,<что вставить>]) – удаляет и вставляет эл-ты
.slice(<нач. поз.>,<кон.поз>) – возвращает подмассив из массива
.reverse() – меняет порядок
.split(<"разделитель">) – трансформирует строку в массив
.join(<"разделитель">) – трансформирует массив в строку
.indexOf(<Значение>) – возвращает индекс заданного значения в массиве
.lastIndexOf(<>) – с конца
.every – проверяет массив на соответствие всех эл-тов условию, описанному в функции, передаваемой в виде аргумента
.some – проверяет массив на соответствие хотя бы одного эл-та условию, описанному в функции, передаваемой в виде аргумента

> Пример:
var a = [1,2,3,4,5,6,7,8];
function check(n) {return n > 0;}
console.log(a.every(check));
или:
console.log(a.every(n => n > 0));

массив объектов:
console.log(phones.every(item => item.priceUAH <= 25000));

.sort() – сортирует массив как массив строк
.sort((a, b) => a.length – b.length); // – для массива строковых значений
a.sort((a, b) => a > b ? 1 : -1); – для строк
a.sort((a, b) => a – b); – сортирует как массив чисел
a.sort((a, b) => a.price – b.price); – для объектов

var sortBy = (a, b) => a > b ? 1 : -1;
.sort(sortBy)

> Перебор значений массива

phones.forEach(function(item, pos[, arr]){ // item – текущий эл-т, pos – тек. позиция, arr – сам массив
console.log(pos + 1, item.productName, arr);

a.forEach( (i, n, arr) => arr[n] = i + ‘a’ );
});

> Фильтр

var a = [45,67,84,23,45,78,40];
var f = a.filter(function (n){ // n – каждый эл-т массива
return n % 2 == 0; // условие фильтра
}); // рез-тат помещаем в новый массив

> Поиск

.find – ищет 1-й попавшийся, соотв. условию
arr.find((e)=>{return e==5})

> Объекты

let admin = {
name: “Eugene”,
age: 36,
isAdmin: true,
};

let user = admin;

user.name = “Andrey”;

> Клонирование объектов

admin = {
name: “Eugene”,
age: 36,
isAdmin: true,
};
user = {};
for(key in admin){
user[key] = admin[key];
}

var user = {
name:‘eee’,
age:37
};

var player = {};

for (key in user) {
player[key] = user [key];
}

> JSON
var player = JSON.parse(JSON.stringify(user));
var user = ‘{ “name”: “Вася”, “age”: 35, “isAdmin”: false, “friends”: [0,1,2,3] }’;

> Функции

var sum = new Function (‘a’, ‘b’, ‘return a + b’);
// все аргументы, кроме последнего – аргументы функции, последний аргумент – тело функции. Function с большой буквы.

eval(‘var x=5; var y=2; console.log(x+y)’); – js код находится в кавычках (работает только в браузере)

> стрелка-функция

var sum4 = (a, b) => a + b;
var pow = n => n*n;
var hello = () => ‘Hello, world’;
var sum5 = (a, b, c) => {
r = a + b;
r += c;
return r;
}

> Произвольное к-во аргументов

function sum () {
var r = 0;
for (var j = 0; j<arguments.length; j++) {
r += arguments[j];
}
return r;
}

function calc (…rest) { } // ..rest – массив данных
var arrTransition = (…rest) => {
for (var j = 0; j < rest.length; j++) {rest[j] = j%2==0 ? rest[j] = rest[j] + 1 : rest[j] = rest[j] -1;}
return rest;
}

> Вложенный вызов

function f(a) {
return function(b) {
return a + b;
}
}

console.log(f(5)(3));

> callback

function sum (a, b) {
return a + b;
}
function diff (a, b) {
return a – b;
}

function operation (a, b, action) {
return action (a, b);
}

console.log(operation(10, 2, sum));
console.log(operation (12, 5, (a, b) => a * b));

> Самовызывающаяся функция

(function() {} ) ()
или
; (function() {} ) () ;
или
(function {} () );

> Замыкание

setGlobals = (globalVariable) => {
return function(delta) {
globalVariable += delta;
console.log(globalVariable);
}
}

changeGlobals = setGlobals(5); // задаем исходное значение скрытой глобальной пер-ной

changeGlobals(10); // меняем значение

> Ссылки

document.location.href = “http://www…”; – переход по ссылке
document.location.replace(“http://www…”); – так, чтобы в истории браузера не осталась запись о текущей странице
location.reload(true) – перезагрузка страницы

window.open([URL, name, specs, replace])

> События

onmouseenter/onmouseleave – заход / выход на элемент. дочерние элементы игнорируются (при заходе на дочерний не генерируется mouseout для родителя).
window.onResize
scroll
document.load
document.DOMContentLoaded – все DOM-элементы разметки уже созданы, можно их искать, вешать обработчики, но при этом, возможно, ещё не догрузились какие-то картинки или стили.

object.removeEventListener(event, function, useCapture) !!! нельзя удалить обработчик, где функция передана анонимно!

event.type
event.target.tagName
event.currentTarget – Элемент, на котором сработал обработчик
event.clientX/clientY – Координаты курсора в момент клика (без учета прокрутки)
event.pageX/pageY – Координаты курсора в момент клика (с учетом прокрутки)
event.stopPropagation() – останавливает всплытие события
event.preventDefault() – отменяет действие по умолчанию (если обработчик назначен через on-событие (не через addEventListener), то можно просто вернуть false из обработчика

Метод addEventListener додає подію до об’єкту і вказує function яка буде виконуватися при виникнені події. Прицьому вказаній функції у параметрі function буде передаватися лише один параметр: об’єкт Event. Щоб передати параметр функції яку вказали в addEventListener потрібно у параметр function передати об’єкт в якому вказати handleEvent:функцію і необхідні параметри. Прицьому параметри не будуть доступні як параметри функції а як this.назва параметру
document.getElementById(“test2”).addEventListener(‘click’,{handleEvent:f, a:10, p:‘переданий “параметр”’});

> Смартфон

События: touchstart, touchend
touchmove
event.changedTouches0.pageX / pageY

touchenter – срабатывает когда касание происходит только в пределах выбранного элемента
touchleave – срабатывает когда точка соприкосновения выходит за пределы выбранного элемента
touchcancel – срабатывает когда точка соприкосновения вышла за пределы браузера.

http://vvz.nw.ru/Lessons/JavaScript/events.htm – список событий

> DOM

window.screen.availWidth (height) – физические размеры экрана (статичные)
window.innerWidth, window.innerHeight – размеры окна браузера

document.body
document.documentElement – секция
document.activeElement – эл-т на котором фокус
document.bgColor – цвет фона документа
document.cookie – позволяет читать и писать куки файлы
document.lastModified – дата последнего изменения документа
document.referrer – ссылка, которая привела на текущую страницу
document.title – содержимое тега title
document.forms – массив форм HTML документа
document.images – массив изображений HTML документа
document.links0.href – массив ссылок HTML документа
document.anchors – массив якорей (тегов c атрибутом name)

getElementsByName – по значению тега name
getElementsByTagName
querySelector
querySelectorAll
elem.matches(<селектор>) – проверяет эл-т на соответствие указанному селектору
.elem.closest(css) – ищет ближайший элемент выше по иерархии DOM, подходящий под CSS-селектор css. Сам элемент тоже включается в поиск

<img src = “1.jpg” onerror = “this.style.display = ‘none’”> – скрыть картинку, если не загружается

> Узлы документа

childNodes[i] – узлы документа
childNodes[i].nodeType – тип узла (1 – элемент; 2 – атрибут; 3- текстовый узел; 8 – коментарий; 9 – узел документа (document); 10 – декларация типа док-та (!doctype html…)
firstChild, lastChild
nextSibling, previousSibling
parentNode – родительский узел
объект Node:
.nodeValue
.nodeType
.nodeName

> Элементы документа

parentElement – родительский элемент
nextElementSibling, previousElementSibling
firstElementChild, lastElementChild
children

> Стили

getComputedStyle(element).backgroundColor – получить стиль, описанный в CSS
getComputedStyle(element[, pseudo])
element.getBoundingClientRect() – координаты и размеры элемента

let {left, top} = getComputedStyle(log); – присвоить соотв. свойства объекта нескольким переменным
const {pageX, pageY} = event;

el.style.cssText=“color: red” – задать стиль в виде строки

> Атрибуты

element.setAttribute(‘attribute’, ‘value’)
getAttribute
removeAttribute
el.getAttributeNode – возвр сам аттрибут, а не его значение: getAttributeNode(‘class’) > ‘class = “slider”’

> data – атрибуты


доступ:
el.getAttribute(“data-color”)
el.dataset.color

> Элементы

.createElement(“тег”)
.appendChild – добавить дочерний элемент
parentElem.insertBefore (<что добавить>, <перед чем добавить>) – добавить элемент перед указанным
.removeChild – удаление элемента
.replaceChild – замена одного элемента на другой

> Методы classList

elem.classList.contains(“class”) – возвращает true/false, в зависимости от того, есть ли у элемента класс class. elem.classList.add/remove(“class”) – добавляет/удаляет класс class elem.classList.toggle(“class”) – если класса class нет, добавляет его, если есть – удаляет.

classList[i]
Element.classList.item()
Element.classList.length
Element.classList.toString()
Element.className

> Проверка поддержки браузером

CSS.supports(“display”, “flex”); /* true / false */
el.style[‘display’] – возвращает значение или undefined, если браузер не поодерживает данное css-свойство

> Размеры и прокрутка

window.pageXOffset/pageYOffset – текущая прокрутка страницы (смещение, r/o)
window.innerWidth/innerHeight – размеры видимой части vp, без учета полосы прокрутки

el.scrollLeft/scrollTop – текущая прокортка эл-та
el.scrollWidth/scrollHeight – разм. эл-та с учетом прокрутки
el.clientWidth/clientHeight – разм. эл-та

document.body.style.overflow = “hidden” – запрет прокрутки страницы

var scrollHeight = Math.max( // размеры страницы с учетом прокрутки
document.body.scrollHeight, document.documentElement.scrollHeight,
document.body.offsetHeight, document.documentElement.offsetHeight,
document.body.clientHeight, document.documentElement.clientHeight
);

window.scrollTo(pageX,pageY) – задать абсолютные координаты,
window.scrollBy(x,y) – прокрутить относительно текущего места.
elem.scrollIntoView(true/false) – прокрутить, чтобы элемент elem стал виден (true – вверху, по умолчанию; false – внизу)

> localStorage

localStorage.setItem(‘ключ’, ‘значение’)
localStorage.getItem(‘ключ’)
localStorage.removeItem(“Ключ”)
localStorage.clear()

> Формы

Доступ к элементам формы:


let form = document.forms.admin.elements;

form.elements – список эл-тов формы
.elements0
autofocus – атрибут, устанавливающий фокус

> Браузер

if (navigator.userAgent.search(“MSIE”) >= 0) {
//code goes here
}
else if (navigator.userAgent.search(“Chrome”) >= 0) {
//code goes here
}
else if (navigator.userAgent.search(“Firefox”) >= 0) {
//code goes here
}
else if (navigator.userAgent.search(“Safari”) >= 0 && navigator.userAgent.search(“Chrome”) < 0) {
//code goes here
}
else if (navigator.userAgent.search(“Opera”) >= 0) {
//code goes here
}

> отслеживание изменений свойства объекта

var oScope = { $privateScope:{}, notify:function(sPropertyPath) { console.log(sPropertyPath,“changed”); } }; Object.defineProperties(oScope, { myPropertyA: { get:function() { return oScope.$privateScope.myPropertyA }, set:function(oValue){ oScope.$privateScope.myPropertyA = oValue; oScope.notify(“myPropertyA”); } } }); oScope.myPropertyA = “Some Value”;

Clone this wiki locally