SEO продвижение сайтов

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-анимация завершена.

Есть три способа назначения обработчиков событий:

  1. Атрибут HTML: onclick="...".
  2. DOM-свойство: elem.onclick = function.
  3. Специальные методы: 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)

Алехин Г.В. 02.02.2022

Добавить комментарий


Защитный код
Обновить

Web-технологии

Событие в JavaScript

Событие в JavaScript - это определённое действие, которые вызвано либо пользователем, либо браузером.

Например:

События мыши:

  • click – происходит, когда кликнули на элемент левой кнопкой мыши (на устройствах с сенсорными экранами оно происходит при касании).
  • contextmenu – происходит, когда кликнули на элемент правой кнопкой мыши.
  • mouseover / mouseout – когда мышь наводится на / покидает элемент.
  • mousedown / mouseup – когда нажали / отжали кнопку мыши на элементе.
  • mousemove – при движении мыши.

События на элементах управления:

  • submit – пользователь отправил форму
  • focus – пользователь фокусируется на элементе, например нажимает на <input type="text" />.
Подробнее...

Универсальный обход по массиву

Предлагаю вашему вниманию PHP-код - универсальный обходчик любого массива с любым представлением. Используем две функции: 1) функция с циклом (метод ArrFor() в классе) и 2) функция (как аргумент) с оформлением результатов обхода по массиву в цикле.

Подробнее...

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)//Программист - отображается в консоли

	// - это однострочный комментарий

	/*
		тут 
		многострочные 
		комментарии
	*/

Подробнее...
Интересные статьи

Диалектические противоречия или чего хотят современные женщины

Современная женщина, независимо от доходов и статуса, выбирает мужчину для отношений, который должен обладать рядом черт характера. Именно наличие этих естественных черт характера у мужчины определяют его как достойного для создания пары.

Многие женщины, живущие в современном мире, традиционно имеют как минимум два взаимоисключающих убеждения в отношении взаимодействия с мужчинами для создания такого союза.

Подробнее...

Почему мужчинам опасно регистрировать брак в России

Почему мужчинам опасно регистрировать брак в России

Сразу хочу сообщить, что я не оголтелый женоненавистник или противник семейных ценностей. Я как раз наоборот - замечательно и с почтением отношусь к прекрасным дамам и являюсь сторонником традиционных семейных ценностей.

Но при этом категорически настаиваю, что официально регистрировать брак в нашей стране для мужчин катастрофически опасно и вот почему...

Подробнее...

День Победы со слезами на глазах...

День Победы со слезами на глазах...

Дорогие друзья, вот и прошёл пожалуй самый светлый праздник для нашей страны, для нашего народа - ДЕНЬ ПОБЕДЫ - 9 мая.

Но, как именно прошёл праздник 75-летия ПОБЕДЫ в этом году, я хочу напомнить сегодня, спустя 4 дня от празднования исторической даты.

У меня такое ощущение, как будто никто не заметил, что ПОЛИЦАИ по всей стране в этот день задерживали, арестовывали и штрафовали именно за память о Победе, за возложение цветов к памятникам нашим павшим героям.

Подробнее...

Оставить заявку

Закрыть
Заполните фрму и отправьте нам заяку
Заполните все обязательные поля*
captcha
Перезагрузить