Сообщество - Web-технологии

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

534 поста 5 786 подписчиков

Популярные теги в сообществе:

16

Undefined и null в JavaScript

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

Undefined


undefined - примитивный тип данных который присваивается переменным как только они были объявлены.Также присваивается аргументам функции которые не были переданы и возвращается из функций внутри которых отсутствует 'return value' или присутствует 'return' без значения.


Не может вернуться и функции которая вызвана через оператор 'new'.


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


let exampleUndefined_1;
console.log('empty variable', exampleUndefined_1);
function exampleUndefined_2(a, b) {
console.log('func arguments', a, b);
}
exampleUndefined_2();

function exampleUndefined_3() {
return;
}
console.log(
'Empty return value',
exampleUndefined_3()
)


function exampleUndefined_4() {
let a = 2 + 2;
}
console.log(
'No return value',
exampleUndefined_4()
)

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


Для того чтобы избежать undefined есть несколько способов. Самым простым из них является инициализация переменной сразу со значением, а также использование let и const вместо var.


let foo = 10; // Good
let bar; // Bad
bar = 10;
var baz = 10; // Bad


Null


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


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


let nullExample_1 = null;

// Фигурные скобки используются для создания объекта.
let nullInObjectExample = {
firstName: null,
lastName: null,
age: 10
};

Отличие null от undefined


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


undefined обозначает неопределенность, а именно то что контейнер был создан но его значение не определили или свойство не было определено вовсе.


Баг оператора typeof


Если мы используем typeof для проверки тип данных null мы получи object.


console.log(
typeof null
)

Для проверки того что значение действительно null, делаем так:


const anotherNullVariable = null;

console.log(

anotherNullVariable === null
)
Файлы с урока


undefined - link

null - link


P.S. Не забудь подписаться на мой youtube канал и на канал в telegram где я выкладываю контент каждый день.

Показать полностью
2

Что нужно знать\уметь для создания сайта?

Захотел сделать себе простенький сайт, без особых наворотов, максимум 3-4 страницы. Что для этого нужно изучить? Не хочу использовать конструкторы и готовые движки, хочу чтобы все сам, абсолютно все было своими ручками) Сейчас накидал макет в иллюстраторе, знаю HTML и CSS, SQL, что-то могу накалякать на рython'e (он же вроде используется в разработке сайтов, да?).

Каков мой дальнейший порядок действий? Можете порекомендовать ютуберов на эту тематику? Не знаю что именно мне надо искать, находил только ролики про вордпресс и тильду

4

Помогите обойти систему электронной очереди

Добрый день всем!
Надеюсь, пишу в правильном сообществе.
Кратко: нужно записаться на подачу документов в визовый центр, на сайте стоит какая-то система электронной очереди (virtual queue), которую нереально пройти (время ожидания то уменьшается, то увеличивается, в итоге на нужный сайт перенаправляет уже в конце дня, когда свободных слотов уже нет). Методы, которые я смогла найти в Гугле, не помогли, ну или я криворукая. Уже несколько недель пытаюсь, ничего не выходит. Можно, конечно, в агентство обратиться, но они заламывают бешеную стоимость, причем я уверена, они как раз и используют какой-то метод, чтобы обойти эту систему и записать своих клиентов. Может, и мне поможет сила Пикабу! Заранее благодарю.

Upd: место действия Беларусь.

Идеальный мир дизайнеров

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


Поддержите меня и подпишитесь на мой телеграмм канал: t.me/cherkashindev

Показать полностью 21
11

Теги select и textarea в HTML5

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 каналы чтобы получать больше контента )

Показать полностью
42

Как быстро написать слайдер на 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

Показать полностью 8
11

Вложенность селекторов

Селектор потомков (селекторы разделяются пробелами)


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


Рассмотрим пример - selectors_nesting.html

Задача 1

Нам нужно сделать заголовки каждого article больше чем они есть сейчас, мы конечно можем каждому <h2> внутри article задать отдельный класс и обратится к нем, и это будет даже правильно, но в любом случае в таких ситуациях нам нужно будет обратится к их родителю чтобы было понятно какие именно заголовки и внутри какого блока мы хотим увеличить.

Решение:

main article h2 {
font-size: 28px;
}

В данном случае мы указали комбинацию из 3х селекторов, мы уже знаем как они работают по отдельности, но разделив их пробелом браузер интерпретирует их как один большой селектор. В данном случае браузер будет брать только те теги <h2> которые находятся внутри тега <article> который в свою очередь находится внутри тега с классом .articles.


P.S. Не стоит увлекаться и использовать большие вложенности селекторов, наоборот, старайтесь использовать комбинации не более 2-3х селекторов.

Задача 2


В нашем html файле есть 2 section с классами articles и news, нам необходимо изменить код который мы писали выше, чтобы сделать заголовки статей в блоке .articles размером 32px и цветом deeppink, а в блоке .news размер заголовков должен быть 28px и их цвет blueviolet.


Решение:


Дочерний селектор (селекторы разделяются символом '>' ) Задача 3: У наших секций articles и news также есть заголовки, и нам нужно выделить их отдельным цветом blue и задать им размер шрифта в 50px. Попробуем это сделать.


main .articles h2 {
color: blue;
font-size: 50px;
}
main .news h2 {
color: blue;
font-size: 50px;
}

Дочерний селектор (селекторы разделяются символом '>' )


Задача 3


У наших секций articles и news также есть заголовки, и нам нужно выделить их отдельным цветом blue и задать им размер шрифта в 50px. Попробуем это сделать.


main .articles h2 {
color: blue;
font-size: 50px;
}
main .news h2 {
color: blue;
font-size: 50px;
}

Решение


Перейдя на страницу мы видим что абсолютно все теги <h2> приняли такие стили, хотя мы этого не хотели, в таком случае мы можем задать атрибут класс для нужных нам заголовков и стилизовать или использовать символ '>' когда пишем вложенность.


main .articles > h2 {
color: blue;
font-size: 50px;
}
main .news > h2 {
color: blue;
font-size: 50px;
}

Немного усовершенствуем наше решение


main .articles > h2,
main .news > h2 {
color: blue;
font-size: 50px;
}

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



Добираемся к элементу по нескольким селекторам ( селекторы не разделяются )


В таком случае селекторы которые мы используем являются одним целым селектором.


a#link.read-more {
color: blue;
text-decoration: none;
font-size: 20px;
font-weight: bold;
}

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



Файлы с урока


1. HTML File

2. CSS File



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

Показать полностью
Отличная работа, все прочитано!