Javascript + Web-программирование

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 канал чтобы регулярно получать новый контент.

Select

<select> - элемент содержащий меню опций <option> или меню групп опций <optgroup>. Имеет схожие с <input> атрибуты, а также атрибуты multiple и size. Обычно select располагается внутри тега <form> или связывается с ним атрибутом form.

<form action="">
<select name="some_list"></select>
</form>

<option> - тег, который используется для определения пункта списка внутри тега <select>, но также его можно встретить и в тегах. Атрибуты: selected - позволяет пред-выбрать элемент. disabled - работает как всегда. и другие.

<form action="">
<label for="select">Select item</label>
<select name="list" id="select">
<option value="item-1">Item #1</option>
<option value="item-2">Item #2</option>
<option value="item-3">Item #3</option>
<option value="item-4">Item #4</option>
</select>
</form>

<optgroup> - позволяет группировать опции внутри <select>. Имеет атрибуты - name и disabled. name - задает имя группы. disabled - исключает возможность выбора элементов из группы. label - Задает имя группы которое видно пользователю.

<form action="">
<label for="select2">Select item</label>
<select name="list" id="select2">
<optgroup label="Veggie">
<option value="item-1" selected>Mushrooms</option>
<option value="item-2">Carrot</option>
</optgroup>
<optgroup label="Meat" disabled>
<option value="item-3">Pork</option>
<option value="item-4">Chicken</option>
</optgroup>
</select>
</form>

Атрибут multiple тега <select> позволяет выбирать не один, а сразу несколько <option> если зажата клавиша CTRL (для windows или linux) или COMMAND (для macOS)

<form action="">
<label for="select3">Select item</label>
<select name="list" id="select3" multiple>
<optgroup label="Veggie">
<option value="item-1" selected>Mushrooms</option>
<option value="item-2">Carrot</option>
</optgroup>
<optgroup label="Meat" disabled>
<option value="item-3">Pork</option>
<option value="item-4">Chicken</option>
</optgroup>
</select>
</form>

Textarea

<textarea> - позволяет добавить поле для ввода большого количества текста, обычно располагается внутри тега <form>. Имеет атрибуты схожие с <input>, а также cols и rows.

cols - определяет ширину <textarea>

rows - определяет высоту <textarea>

<form action="">
<label for="message">Your massage</label>
<textarea
name="user_message"
id="message"
cols="30"
rows="10"
placeholder="Your message..."
></textarea>
</form>

У тега <textarea> нет атрибута value, а если вы ходите установить ему какое-то значение по-умолчанию, нужно писать его между открывающим и закрывающим тегами.

<form action="">
<label for="message2">Your massage</label>
<textarea
name="user_message"
id="message2"
cols="30"
rows="10"
placeholder="Your message..."
>Some predefined data goes here</textarea>
</form>

Файлы с урока

select

textarea

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

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

Слайдер будет состоять из кусков кода 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

В сегодняшнем материале попытаемся разобраться с перспективами отечественного ПО и железа в нынешних реалиях и о отечественных аналогах, материал подготовлен при помощи подписчиков нашего канала IT-старт t.me/it_begin

Рынок IT находится в дикой турбулентности

Согласно прогнозам IDC, опубликованным в апреле, объём IT-рынка в 2022 году вынужденно сократится на 39.2%

Но не будем забывать то, в какое время мы сейчас живем. На фоне ухода западных компаний из РФ интерес к отечественным разработкам за последние месяцы вырос более чем на 300%.

Импортозамещение

Попытки импортозамещения начались не вчера. Сам этот процесс в IT-сфере идет с появления первых санкций 2014 г.

Акцент на импортозамещение также сделан посредством национальной программы "Цифровая экономика", используя которую госкорпорации еще в 2021 году должны были заменить иностранное ПО российским софтом, но , к концу 2021 года из 13% госкомпаний смогли это реализовать.

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

Microsoft Office планируется заменить российским "Р7-Офис" или "МойОфис,

но, чем заменить те же SAP и Oracle, что используют тысячи предприятий в РФ и что на данный момент не имеют полноценных российских аналогов? Тут уже сложнее. Даже при наличии разработки подобного программного обеспечения, переход на него потребует больших финансовых и временных затрат, ведь необходимо будет адаптировать и перестроить все бизнес-процессы, подстраивая их под новые системы. Так или иначе, лишь спустя время мы сможем увидеть, как наш крупный бизнес справится с этой задачей.

Российское железо

В 2021 году Минпромторг требовал от разработчиков ускорения по адаптации ПО под отечественные процессоры "Байкал" и "Эльбрус". Желательный итог всего этого - это к 2023 году иметь отечественные процессоры в 70% закупаемых госорганизациями компьютерах.

На данный момент, самый конкурентный процессор - это "Байкал-S", что по характеристикам сопоставим с Intel и AMD 2019 года. По вычислительным возможностям он схож с Intel Xeon 6148 Gold.

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

Российское программное обеспечение

Подавляющее большинство российских операционных систем так или иначе представляют собой дистрибутивы на базе Linux. Alt Linux или Astra Linux тому подтверждение.

Если говорить о "Astra Linux", то она входит в реестр Минкомсвязи и сертифицирована для использования. В первую очередь, данная ОС предназначена для обработки данных в режиме повышенной защиты обрабатываемой информации.

Говоря о "Alt Linux", необходимо в первую очередь отметить, что данная ОС считается самой удобной в использовании для массового пользователя. В комплекте с ней идёт полный комплект программ. ОС проста в установке и распространяется бесплатно.

Также стоит отметить операционную систему "Ось", что также на базе Linux. ОС представляет решения для комплексной автоматизации рабочих мест и информационной структуры предприятий, в том числе в серверах, дата-центра и рабочих станциях.

Отечественные аналоги Google Play и AppStore

Из за частых новых ограничений со стороны западных компаний IT-сектора, активизировалась вынужденная разработка альтернативных приложений вместо AppStore и Google Play. Подробности узнать о нынешних аналогах тяжело, но вот что мы имеем на данный момент:

SberStore - магазин приложений от компании "Сбер" для массового потребителя на базе корпоративных приложений для специалистов

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

VK - в данной коммерческой гонке планирует принять участие и команда VK, проектное название данного приложения "HashStore".

Подводим итог

Подводя итоги, мы можем наблюдать, как меняется окружающая нас IT-реальность. То что было доступно ранее, возможно скоро станет недоступно в использовании.

Так или иначе, в плане офисных программ решения замены уже имеются. В плане операционных систем все решения сводятся к отечественным ОС, что базируются на Linux, что не для всех является удобным в использовании.

К сожалению вопрос замены достойными и полноценными аналогами ПО от SAP и Oracle является сложным и над этой задачей ещё придётся потрудиться.

Если же говорить о том, смогут ли Сбер, Яндекс и VK заменить в РФ таких гигантов IT-индустрии, как Google Play и AppStore - покажет лишь время.

Если вас интересует IT его перспективы в РФ ,

публикую также свои статьи и интервью c программистами на канале t.me/it_begin

Подписывайтесь, если будет интересно ;)

Спасибо!