Javascript + Web

1. Object.entries

Большинство разработчиков используют метод Object.keys для итерации по объекту. Этот метод возвращает только массив ключей объекта, а не значения. Можно использовать Object.entries для получения как ключа, так и значения.

Чтобы выполнить итерацию по объекту, можем сделать следующее:

Оба подхода, описанные выше, возвращают один и тот же результат, но Object.entries позволяет легко получить пару ключ-значение.

2. Метод replaceAll

В JavaScript, чтобы заменить все вхождения строки другой строкой, нам нужно использовать регулярное выражение, подобное следующему:

Но в ES12 в String.prototype добавлен новый метод replaceAll, который заменяет все вхождения строки другим строковым значением:

3. Числовой разделитель

Можно использовать символ подчеркивания «_» в качестве числового разделителя, для упрощения подсчета количества нулей в числе.

Разделитель также можно использовать с числами BigInt, как в следующем примере:

Это делает число более читабельным.

4. document.designMode

Связанный с интерфейсным JavaScript, designMode позволяет редактировать любой контент на странице. Просто откройте консоль браузера и введите следующее:

Это полезно для дизайнеров, так как им не нужно каждый раз менять что-то в коде в соответствии с изменениями на экране.

Заключение

Рассмотренные трюки и фичи способны ускорить работу разработчика, а их использование не только необходимо, но и полезно. Продолжайте познавать скрытые возможности языка, изучать всевозможные трюки и повышать свой скилл, а мы поможем новым чтивом. Удачи!

Object

object - ссылочный тип данных, является то самостоятельной единицей, имеющей свойства и определённый тип.

У объекта есть свойства которые с ним ассоциируется. Свойство объекта можно понимать как переменные закрепленные за ним.

Для того чтобы создать объект у нас есть несколько способов.

Конструктор класса

// Вызов конструктора класса Object
let objectExample_1 = new Object();

// Далее наполняем его данными
objectExample_1.name = 'John';
objectExample_1.age = 22;

В примере выше мы создали внутри объекта свойства name и age и записали в них данные.

Литерал

Мы можем использовать более простой и удобный синтаксис для создания объектов.

let objectExample_2 = {}
// наполнение объекта данными

objectExample_2.name = 'Alice';
objectExample_2.age = 30;
console.log(objectExample_2)

let objectExample_3 = {
name: 'Vladimir',
age: 25
}
console.log(objectExample_3)

let user = {
firstName: 'John',
lastName: 'Doe',
age: 30,
gender: 'male'
}

Допустим я хочу получить имя данного пользователя.

console.log(user);
console.log(user.firstName);

Аналогичным образом я могу получить доступ ко всем значениям свойств объекта.

console.log(user.lastName);
console.log(user.age);
console.log(user.gender);

Синтаксис квадратных скобок - []

Ключи в объектах это всегда строки или Symbol, сосредоточимся пока на строках. Как мы знаем строки не всегда могу состоять из одного слова в котором нет пробелов и как быть если нам нужно создать свойство в объекте имя которого будет состоять из 2х слов разделенных пробелами или вообще будет являться выражением. Для этого будем использовать [ ].

let student = {
firstName: 'John',
['last name']: 'Dou', // Имя свойства содержащее пробел
['student-' + 'age']: 30, // Вычисляемое имя свойства
}
console.log(student);

console.log(student.firstName) // Обычный способ
console.log(student['last name'])
console.log(student['student-age'])

Готово, теперь все работает!

Вложенные объекты

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

const deepObject = {
name: 'Mazda',
model: '#1',
owner: {
firstName: 'John',
lastNam: 'Doe',
age: 12
}
}
console.log(deepObject)

Это простой пример, на самом деле вложенность может быть очень большой, важно понимать что так можно делать.

Array

array - массив данных, а также итерируемый объект, также относится к типу данных object. Ключи для элементов массива создаются автоматически и являются индексами, позицией элемента внутри массива.

Индексирование массива начинается с нуля.

const arr = ['John', 'Alice', 'Andrew', 'Antony'];
console.log(arr)

У массива есть длинна (length), это свойство содержит количество элементов массива.

console.log(arr.length);

Берем элементы по их индексу.

console.log(
arr[0], arr[1], arr[2], arr[3]
)

Если мы хотим гарантировано получить значение последнего элемента в массиве.

console.log(
arr[arr.length - 1]
)

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

Функции

Функции - это участки кода которые можно переиспользовать, в этом уроке мы не будем их рассматривать подробно.

Для создания функции существует несколько способов ключевое слово function и стрелочный синтаксис.

function foo(a, b) {
return a + b;
}

const bar = (a, b) => {
return a - b;
}

console.log(foo);
console.log(bar);

Функции также являются объектами и относятся к типу данных object.

Файлы с урока

P.S. Подпишись на мой youtube и telegram канал чтобы регулярно получать новый контент.

Не долго думая скачал их JS файл и найдя данную строку удалил:

Вот такой перебор так сказать, будьте внимательны))

Как же создать вот такой слайдер?

Слайдер будет состоять из кусков кода HTML, CSS, JS, писать будем в Codepen.io но это только для удобства, можете перенести к себе на сайт, веб-приложение или в удобное для вас место.

План

1. Пишем структуру

2. Пишем стили

3. Пишем код

4. Заполняем объект

Пишем структуру

Наша структура будет состоять из объекта с классом «slider», внутри которого будет две кнопки для переключения, одна с индификатором «left», другая с «right». По середине будет большая фотография с индификатором «slider_image».

<div class="slider">
<button id="left">
<img src="https://cdn-icons-png.flaticon.com/512/318/318476.png">
</button>
<img id="slider_image" src="">
<button id="right">
<img src="https://cdn-icons-png.flaticon.com/512/318/318476.png">
</button>
</div>

Пишем стили

Обнуляем лишние стили и пишем свои для наших элементов, контейнеров, кнопочек и фотографий.

body{
outline: none;
user-select: none;
font-size: 16px;
}
h1,p{
margin: 0;
padding: 0;
}
p{
margin-bottom: 10px;
}
a{
text-decoration: none;
background-color: rgb(50,50,50);
color: white;
padding: 5px 20px;
}
a:hover{
background-color: rgb(70,70,70);
}
.slider{
background-color: rgb(230,230,230);
height: 350px;
padding: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.slider #slider_image{
background-color: rgb(50,50,50);
height: 400px;
min-width: 400px;
}
.slider button{
width: 70px;
height: 70px;
margin: 30px;
border: none;
border-radius: 100%;
padding: 0;
background: none;
}
.slider button img{
width: 50px;
height: 50px;
}
.slider #left img{
transform: rotate(180deg);
}
.slider button:hover{
opacity: 80%;
cursor: pointer;
}

Пишем скрипт

Для начала создадим объект, внутри которого будет хранить фотографии для слайдера, а именно ссылки на них для вписывания в будущем их в атрибут «src» на главной фотографии с индификатором «slider_image». После ищем все нужные элементы на странице через вставку «document.querySelector» и «document.getElementById». Создаем функции такие как «update()» которые будут отвечать за обновление главной фотографии, дальше будем писать ещё две функции для переключения главной фотографии. При старте страницы нужно вызвать функцию обновления, для подстраивания картинки при старте.

let slider_cfg = {
1: "https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554_96...",
2: "https://cdn.pixabay.com/photo/2015/03/27/13/16/maine-coon-69...",
3: "https://cdn.pixabay.com/photo/2021/10/19/10/56/cat-6723256__...",
4: "https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634__...",
5: "https://cdn.pixabay.com/photo/2019/11/08/11/56/cat-4611189__...",
6: "https://cdn.pixabay.com/photo/2021/10/19/10/56/cat-6723256__...",
}
// varibles
let slider_image = document.getElementById('slider_image');
let left = document.getElementById('left');
let right = document.getElementById('right');
let sin = 1; //slider_image_number - sin
let size = Object.keys(slider_cfg).length;
let path = slider_cfg[sin];
// update slide
function update(){
path = slider_cfg[sin];
slider_image.setAttribute("src", path);
}
// toggle slides
left.onclick = function(){
if (sin > 1){
sin = sin - 1;
} else{
sin = 1;
}
update();
}
right.onclick = function(){
if (sin < size){
sin = sin + 1;
} else{
sin = size;
}
update();
}
// start
update();

Заполняем объект

Внутри объекта «slider_cfg», пишем номер картинки от 1 до бесконечности, он сам подстроит и сам определит количество, главное соблюдать индификатор, но можно написать и без индификатора по номеру и просто перебирать их. Ещё легче было бы написать в массиве. После указания номера картинки, после «:» пишем ссылку на картинку в скобочках « ' ' », не забудьте поставить «висячую запятую», то есть как на скриншоте, после каждой записи ставить запятую в конце, даже если запись окончена.

Итог

У нас есть рабочий и очень простенький слайдер для переключения фотографий, которые мы заполняем в объект. Все это работает без сбоев и хорошо.

Ссылка на код: https://codepen.io/Anton-Malezhik/pen/ZEJvbNQ