JavaScript - основы (ES6)
ECMAScript 6 (или ES6) - это новая версия JavaScript 2015г, в которую добавлен новый функционал, которая на сегодня поддерживается всеми современными браузерами.
Переменные и комментарии
JavaScript - не строго типизированный язык. Переменные обозначаются так:
let name='Геннадий'//Строка console.log(name) //Геннадий - отображается в консоли var age=40 //Число(без кавычек) VAR (глобальная) - устарело, не использовать! console.log(age)//40 - отображается в консоли const prof="Программист"//Это константа console.log(prof)//Программист - отображается в консоли // - это однострочный комментарий /* тут многострочные комментарии */
Типы данных
Стандарт ECMAScript определяет 9 типов:
- 6 типов данных являющихся примитивами:
- Undefined (Неопределённый тип) : typeof instance === "undefined"
- Boolean (Булев, Логический тип) : typeof instance === "boolean"
- Number (Число) : typeof instance === "number"
- String (Строка) : typeof instance === "string"
- BigInt : typeof instance === "bigint"
- Symbol (в ECMAScript 6) : typeof instance === "symbol"
- Null (Null тип ) : typeof instance === "object". Специальный примитив, используемый не только для данных но и в качестве указателя на финальную точку в Цепочке Прототипов;
- Object (Объект) : typeof instance === "object". Простая структура, используемая не только для хранения данных, но и для создания других структур, где любая структура создаётся с использованием ключевого слова new: new Object, new Array, new Map (en-US), new Set, new WeakMap, new WeakSet, new Date и множество других структур;
- Function : typeof instance === "function". Специальный случай, упрощающий определение типа для Функций, несмотря на то, что все функции конструктивно унаследованы от Object.
let name='Геннадий'//Строка console.log(typeof name) //string - отображается в консоли console.log(typeof(name))//string - отображается в консоли
Условия, операторы сравнения (if-else, тернарный, switch)
let a=10, b=10//Переменные if (a>b) { console.log(`${a} больше ${b}`)//10 больше 10 } else if(a<b) { console.log(`${a} меньше ${b}`)//10 меньше 10 } else { console.log(`${a} равно ${b}`)//10 равно 10 } //Тернарное выражение let age=10//Возраст let rez = (age > 18) ? 'Взрослый' : 'Ребенок'//Тернарный (или условный) оператор console.log(rez); let v=10//Возраст switch(v){ case 10: result = 'v = 10'; break; case 20: result = 'v = 20'; break; default: result = 'v != 10 и v != 20'; break; } console.log(result)
Создание функций
//Function declaration
function f1(name) {
return 'Привет, '+name
}
console.log(f1('Ваня'))
//Function expression
const f2=function (name) {
return 'Привет, '+name
}
console.log(f2('Аня'))
//Стрелочные функции
const f3=(name) => {
return 'Привет, '+name
}
console.log(f3('Даня'))
//Стрелочные функции СОКРАЩЕННАЯ запись
const f4=(name) => 'Привет, '+name//Сокращенная
console.log(f4('Саня'))
//Самовызывающаяся функция
;(function f5 (name) {
console.log('Привет, '+name)
})('Маня')
Массивы
Массив (Array) в JavaScript является глобальным объектом, который используется для создания массивов; которые представляют собой высокоуровневые спископодобные объекты.
const arr=[1,2,3] //const arr = new Array(4,5,6)//Старый способ console.log(arr) //(3) [1, 2, 3] console.log(arr[1])//2 console.log(arr.length)//Длина массива //Добавление элемента в конец массива arr.push('Апельсин'); console.log(arr)//[1, 'Чай', 3, 4, 5, 'Апельсин'] //Удаление последнего элемента массива arr.pop()// удалим Апельсин (из конца) console.log(arr)//[1, 'Чай', 3, 4, 5] //Удаление первого элемента массива arr.shift(); // удалим элемент (из начала) console.log(arr)//['Чай', 3, 4, 5] //Добавление элемента в начало массива arr.unshift('Клубника') // добавляет в начало console.log(arr)//['Клубника', 'Чай', 3, 4, 5] //Поиск номера элемента в массиве let pos = arr.indexOf('Чай') console.log(pos)//1 - индекс //Удаление нескольких элементов, начиная с определённого индекса arr.splice(1, 2); // так можно удалить элемент console.log(arr)//['Клубника', 4, 5] //Создание копии массива const newArr = arr.slice(); // так можно создать копию массива console.log(newArr)//['Клубника', 4, 5 //Итерирование по массиву arr.forEach(function(item, i, array) { console.log(item, i); });
Ассоциативный массив в JS - это объект (см. ниже...)
Циклы: For, For in, For of
for (let i=1; i<=5; i++) { console.log(i)//выводит } const mass=[1,2,true,'привер']//Создаём массив for (let i=0; i<mass.length; i++) { console.log(mass[i]) } //Создаём объект const myObj={ a:1, b:2, c:true, d:'жопа', } for (key in myObj) { //console.log(key, myObj[key]) console.log(`${key} - ${myObj[key]}`) } //for of - не для объектов const arr=[1,2,true,'привер'] for (const El3 of arr){ console.log(El3)//1 2 true привер } const txt='Гена' for (const El of txt){ console.log(El)//Г е н а } for (const El2 of 'жопа'){ console.log(El2)//ж о п а }
Циклы: forEach - родная для обхода массивов
const arr=[1,2,true,'привет'] arr.forEach(function(v){ console.log(v) }) [123, 456, 'Гена'].forEach((vol, key, array) => { console.log(`${key} ${vol} - ${array}`); }); arr.forEach(value => { console.log(value) }) arr.forEach(v => console.log(v)) //Создаём объект myObj const myObj={ a:1, b:2, c:true, d:'жопа', } //console.dir(myObj) //От объекта получаем массив ключей и обходим их forEach Object.keys(myObj).forEach(key => { console.log(key, myObj[key]) }) //От объекта получаем массив значений и обходим их forEach Object.values(myObj).forEach(val => { console.log(val) }) ['Алёхин', 'Геннадий', 'Владимирович'].forEach(alert); [123, 456, 'Гена'].forEach((vol, key, array) => { //console.log(`${key + "-" + vol + " - " + array}`); alert(`${key + "-" + vol + " - " + array}`); });
Циклы: map
//map - возвращает новый массив, не меняя старый const myArray=[1,2,3] console.log(myArray) //[1, 2, 3] const newArrey=myArray.map(el => el*3) console.log(newArrey)//[2, 4, 6] console.log(myArray) //[1, 2, 3] const new2Arrey=myArray.map(function (el){ return el*10 }) console.log(new2Arrey)//[10, 20, 30]
Циклы: while, do while
let j=1 while (j<=5) { console.log(j++)//выводит } let i=0 do { console.log(i) i++ } while (i<5)
Обход массива циклом for
const fruits = ['Яблоко', 'Банан', 'Клубника', 'Манго']; //С помощью for for (let i=0; i<fruits.length; i++) { console.log(fruits[i])//Выводит элементы } //Цикл for ( of ) for (let value of fruits) { console.log(value);//Выводит элементы } //Итерирование по массиву fruits.forEach(function(item, i, array) { console.log(item, i); }); //Итерирование по массиву - Короткая запись (стрелочная) fruits.forEach((item, i, array) => console.log(item, i));
Объекты. Свойства объектов
Объект в JavaScript — это набор свойств, и каждое свойство состоит из имени и значения, ассоциированного с этим именем.
const person = { name:'Геннадий', age:40, sayHi:function(p){ return `Привет, ${p} ${this.name}` =}, } console.log(person) //{name: 'Геннадий', age: 40, sayHi: ƒ} console.log(person.name) //через . - Геннадий console.log(person['age'])//через [''] - 40 console.log(person.sayHi('товарищ'))//Привет, товарищ Геннадий person.prof = 'Программист'//Добавляем свойство или метод() console.log(person) //{name: 'Геннадий', age: 40, prof: 'Программист', sayHi: ƒ} delete person.prof //Удалить свойство console.log(person) //{name: 'Геннадий', age: 40, sayHi: ƒ} const obj={ a:1, b:2, c:123, d:456, } console.log(obj.c)//123 const b=obj console.log(b.d) //456
Обход свойств объекта через цикл for ( in )
for(key in person) { console.log(`${key} - ${person[key]}`)//Выводит элементы }
Классы. Конструкторы объектов
Для описания сходных объектов используют классы.
class MyClass { constructor(name, age) { this.name = name this.age = age } sayHi(p){ return `${p}, ${this.name}`; } } user1=new MyClass('Гена','40') console.log(user1.name)//Гена user1.name='Геннадий'//Меняем значение console.log(user1.sayHi('Привет'))//Привет, Геннадий user2=new MyClass('Иван','40') console.log(user2.sayHi('Здравствуй'))//Здравствуй, Иван //Новый класс от родительского MyClass - Наследование class NewClass extends MyClass { seyHi(p){ return `${p} ${this.name} - ${this.age} руб !`;//Переопределяем метод } } user3=new NewClass('Диван','100') console.log(user3.seyHi('Продай'))//Продай Диван !
Работа с DOM - выбор DOM элементов
const h1=document.querySelector("#h1")//Выбор как у CSS - по id, class или тегу h1.innerHTML='<i>Новый</i> заголовок';//Внутрь выбранного элемента вставляем текст с тегами; .innerText - только текст
Работа с DOM - выбор коллекции элементов
const p=document.querySelectorAll('p') //console.log(p) for (let v of p) { v.classList.add('red')//Всем <p> добавить class="red" }
- document.getElementById(id);
- el.getElementsByTagName(tag) ищет элементы с данным тегом и возвращает их коллекцию. Передав "*" вместо тега, можно получить всех потомков.
- el.getElementsByClassName(className) возвращает элементы, которые имеют данный CSS-класс.
- document.getElementsByName(name) возвращает элементы с заданным атрибутом name. Очень редко используется.
Работа с CSS классами
Методы .classList:
- .add( className1[,className2,...] ) - добавляет один или несколько указанных классов к элементу. Если у элемента уже есть данный класс, то он к нему добавлен не будет.
- .remove( className1[,className2,... ] ) - удаляет один или несколько указанных классов у элемента. Если у элемента нет класса, который вы хотите удалить, то никаких действий произведено не будет.
- .contains( className ) – проверяет наличие класса у элемента; в качестве ответа возвращает true или false.
- .toggle( className [,flag] ) - переключает указанное имя класса у элемента, т.е. если у элемента есть данный класс, то убирает его; в противном случае добавляет. Второй параметр (flag) необязательный. По умолчанию он имеет значение undefined. Если ему установить значение true или false, то он будет работать как метод add или remove, т.е. либо добавлять класс к элементу, либо удалять его у него.
/* Пример, в котором выполним различные операции над классом элемента используя DOM-свойство className: */ el.className = 'alert'; // добавим класс к элементу el.className = 'alert-warning'; // изменим класс у элемента let E1 = el.className; // получим значение класса и сохраним его в className el.className = ""; // удалим класс у элемента
Работа с Атрибутами
/* Пример, в котором выполним действия как вышеприведённом коде, но с использованием методов для управления атрибутами: */ el.setAttribute('class', 'alert');// добавим класс к элементу el.setAttribute('class', 'alert-warning');// изменим класс у элемента let E2 = el.getAttribute('class'); // "alert-warning"// получим значение класса и сохраним его в className el.removeAttribute('class');// удалим класс у элемента
Заменить картинку
const img=document.querySelector('#logo')//Выбор как у CSS - по id
console.log(img.getAttribute('src')) //flexbox/person.jpg
img.setAttribute('src', 'flexbox/22_Viber.png')//Меняем значение атрибута (картинку)
img.setAttribute('width', '100'); //Меняем размер - width="100"
img.src='flexbox/person.jpg'//А можно и так поменять атрибут src
Прослушка событий
Событие – это сигнал от браузера о том, что что-то произошло. Все DOM-узлы подают такие сигналы (хотя события бывают и не только в DOM).
Вот список самых часто используемых DOM-событий, пока просто для ознакомления:
События мыши:
- click – происходит, когда кликнули на элемент левой кнопкой мыши (на устройствах с сенсорными экранами оно происходит при касании).
- contextmenu – происходит, когда кликнули на элемент правой кнопкой мыши.
- mouseover / mouseout – когда мышь наводится на / покидает элемент.
- mousedown / mouseup – когда нажали / отжали кнопку мыши на элементе.
- mousemove – при движении мыши.
События на элементах управления:
- submit – пользователь отправил форму <form>.
- focus – пользователь фокусируется на элементе, например нажимает на <input>.
Клавиатурные события:
- keydown и keyup – когда пользователь нажимает / отпускает клавишу.
События документа:
- DOMContentLoaded – когда HTML загружен и обработан, DOM документа полностью построен и доступен.
CSS events:
- transitionend – когда CSS-анимация завершена.
Есть три способа назначения обработчиков событий:
- Атрибут HTML: onclick="...".
- DOM-свойство: elem.onclick = function.
- Специальные методы: elem.addEventListener(event, handler[, phase]) для добавления, removeEventListener для удаления.
Обработчик может быть назначен прямо в разметке, в атрибуте, который называется on<событие>.
<input value="Нажми меня" onclick="alert('Клик!')" type="button">
const img=document.querySelector('#logo')//Выбор как у CSS - по id
img.onclick = function() {
alert('Спасибо');
}
img.addEventListener('click', () => alert('Вы кликнули по картинке'));
function handler() {
alert('Спасибо!');
}
img.addEventListener("click", handler);//добавил событие
img.removeEventListener("click", handler);//удалил событие
document.addEventListener("DOMContentLoaded", function() {
alert("DOM построен");//DOM загружен и построен
});
Объект event
const img=document.querySelector('#logo')//Выбор как у CSS - по id
//вывести тип события, элемент и координаты клика
img.onclick = function(event) {
alert(event.type + " на " + this.getAttribute('src')) //click на flexbox/person.jpg
alert("Координаты: " + event.clientX + ":" + event.clientY)//Координаты: 35:175
//img.remove();//Удалить картнку (весь тег img)
this.remove();//Удалить картнку (весь тег img)
}
Eсли addEventListener получает объект в качестве обработчика, он вызывает object.handleEvent(event), когда происходит событие. Мы также можем использовать класс для этого:
const img=document.querySelector('#logo')//Выбор как у CSS - по id
const h1=document.querySelector('#h1') //Выбор как у CSS - по id
class Menu {
handleEvent(event) {
switch(event.type) {
case 'mousedown':
h1.innerHTML = "Нажата кнопка мыши";
break;
case 'mouseup':
h1.innerHTML += "...и отжата.";
break;
}
}
}
let menu = new Menu();
img.addEventListener('mousedown', menu);
img.addEventListener('mouseup', menu);
или
const img=document.querySelector('#logo')//Выбор как у CSS - по id
const h1=document.querySelector('#h1') //Выбор как у CSS - по id
class Menu {
handleEvent(event) {
// mousedown -> onMousedown
let method = 'on' + event.type[0].toUpperCase() + event.type.slice(1);
this[method](event);
}
onMousedown() {
h1.innerHTML = "Кнопка мыши нажата";
}
onMouseup() {
h1.innerHTML += "...и отжата.";
}
}
let menu = new Menu();
img.addEventListener('mousedown', menu);
img.addEventListener('mouseup', menu);
/*
class Menu {
handleEvent(event) {
this[event.type](event);
}
mousedown(e) {
h1.innerHTML = "Кнопка мыши нажата";
}
mouseup(e) {
h1.innerHTML += "...и отжата.";
}
}
*/
Вывод текста из <input> в <p>
const iTxet=document.querySelector('#iTxet')//Выбор как у CSS - по id
const pTxet=document.querySelector('#pTxet')//Выбор как у CSS - по id
iTxet.addEventListener('input', function(){
pTxet.innerText = iTxet.value;
});
Список задач на JS
Для встаки HTML блока следует использовать метод: elem.insertAdjacentHTML(where, html).
Первый параметр – это специальное слово, указывающее, куда по отношению к elem производить вставку. Значение должно быть одним из следующих:
- "beforebegin" – вставить html непосредственно перед elem,
- "afterbegin" – вставить html в начало elem,
- "beforeend" – вставить html в конец elem,
- "afterend" – вставить html непосредственно после elem.
Второй параметр – это HTML-строка, которая будет вставлена именно «как HTML».
<ul id="iUl"> <li>Завтрак</li> <li>Обед</li> <li>Ужин</li> </ul> <form id="iSu"> <input type="text" name="" id="iTx"> <input type="submit" name=""> </form>
const iSu=document.querySelector('#iSu')//Выбор как у CSS - по id
const iTx=document.querySelector('#iTx')//Выбор как у CSS - по id
const iUl=document.querySelector('#iUl')//Выбор как у CSS - по id
iSu.addEventListener('submit', function(e){
e.preventDefault() //Отмена стандартного действия браузера (перезагрузка)
let text = iTx.value//Получаем значение из input
//1-й вариант
//let liText=`<li>${text}<\li>`//Формируем пункт списка
//iUl.insertAdjacentHTML('beforeend', liText);//Вставляем html в конец
//2-й вариант
let liText=document.createElement('li')//Создаём тег li
liText.innerText=text//Добавляем в него содержимое input
iUl.append(liText)//Вставляем html в конец
//+КНОПКА
let button=document.createElement('button')//Создаём тег button - кнопку
button.setAttribute('rote', 'button');//На кнопку атрибут rote='button'
button.innerText='Удалит' //На кнопку текст Удалить
button.style['margin-left']='15px' //На кномку style
liText.append(button) //Вставляем кномку в конец li
//+Событие на кнопку
/*
button.addEventListener('click', function(e){
this.closest('li').remove()//У кнопки ищем родителя - тег li - удаляем его
})
// ИЛИ
*/
button.addEventListener('click', (e)=>e.target.closest('li').remove())//У кнопки ищем родителя - тег li - удаляем его
iTx.value=''//Очищаем поле input
iTx.focus() //Фокус в input
});
Интервал setInterval - clearInterval
let h1=document.querySelector("#h1"), i=0;
/*
setInterval(function() {
h1.innerHTML=++i
}, 1000)
*/
let t=setInterval(() => {
h1.innerHTML=++i//Каждую сек. +1
}, 1000)
h1.onclick = function() {
clearInterval(t)//Остановить при клике
}
Таймер setTimeout
const h1=document.querySelector("#h1")
setTimeout(function(){
h1.innerHTML='Сработал!!!'
}, 3000)
Секундомер
let h1=document.querySelector("#h1"), i=0;
let t=setInterval(() => {
h1.innerHTML=++i//Каждую сек. +1
}, 1000)
setTimeout(() => {
clearInterval(t)//Остановить через 5 сек
}, 5000)
