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 (let i=1; i<=5; i++) {
		console.log(i)//выводит
	}


	let j=1
	while (j<=5) { 
		console.log(j++)//выводит
	}

Обход массива циклом 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: ƒ}

Обход свойств объекта через цикл 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 дня от празднования исторической даты.

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

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

Стишки-депрессяшки

Стишки-депрессяшки

У меня нет попы

у меня нет тить

я должна работать

чтобы как то жить

©

В камасутре много

интересных поз

жаль у нас с женою

остеохондроз

©

Надо же приснится

всякая херня

прямо на работе

среди бела дня

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

Почему или резонные вопросы

Почему или резонные вопросы

Хотель бы получить ответы на такие вопросы:

  1. Почему современные технологии одновременно позволяют производить банки для пива, которые не разлагаются на свалке за 100 лет, и кузова автомобилей, которые гниют за 3-4 года?
  2. Почему лимонный сок сделан из концентрата, а средство для мытья посуды – из настоящего лимона?
  3. Почему белая нитка, которой соединены новые носки, всегда оказывается прочнее, чем нитки, из которых сделаны сами носки?
Подробнее...

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

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