0 просмотренных постов скрыто
Теги 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>
Файлы с урока
P.S. Подписывайся на мой youtube и telegram каналы чтобы получать больше контента )
Показать полностью
Есть инвалиды в треде?
Клуб любителей чернушки на Пикабу: Чёрный юмор. Присоединяйся, тут весело :D
Вложенность селекторов
Селектор потомков (селекторы разделяются пробелами)
В реальной разработке, зачастую нам приходится использовать вложенные селекторы для того чтобы добраться к внутренним элементам 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 каналы чтобы получать больше контента )
Показать полностью
Курсы Frontend - где учиться онлайн
Программирование востребовано, это аксиома. Вопрос профориентации как глубоко субъективный, сразу к делу — обучению разработке интерфейсов.
С одной стороны, мы постоянно окружены средой взаимодействия — смартфоны, компьютеры, терминалы оплаты, инфотабло, онлайн-сервисы. С другой, большинство сценариев откровенно бесят интуитивно непонятной логикой.
Собираюсь учиться фронтенду, потому что есть подозрение, что многое сделано для удобства разработчика, а не пользователя. Говорят, это давняя вражда, посмотрим:)
Разумеется, учиться лучше онлайн — самостоятельно выбирать время занятий, интенсивность и нагрузку, не тратить время на дорогу и облачение в приличный вид. Работа из дома накладывает отпечаток:) Да и последние пару лет позволили забыть о страшном сне регулярных вылазок в час-пик.
В поисковике много вариантов, все кажутся примерно одинаковыми, а чтобы залезть в нюансы, нужно потратить кучу времени. Больше двух курсов параллельно изучить объективно не получится — нет ни времени, ни ресурсов. Поэтому сравниваю два курса — «Фронтенд-разработчик» на Хекслете и «Веб-разработчик» на Яндекс.Практикуме.
Почему эти два курса?
1. Содержание курсов схоже, оба последовательно погружают в специальность.
2. Тестовый период примерно равен, позволяет прикинуть, что предстоит, выдержишь ли нагрузку, нравится ли в принципе.
3. Есть теория, практика и бесконечный доступ к базовым знаниям по специальности.
4. Варианты помощи с трудоустройством после успешного прохождения полного курса.
5. Противоположное позиционирование, скажем так. Хекслет подкупает практичным подходом, приятным интерфейсом без нагромождений, отсутствием пафоса. Яндекс — это Яндекс, лидер, мощь, многообещающий и трудоустраивающий. Выглядит как большая надежда или мясорубка юных талантов. И то, и другое привлекательно:)
Внимание на старт
Первое впечатление сложилось еще при поиске курса. Хекслет пишет «фронтенд» по-русски, курс емко описан парой экранов, регистрация как заявка на обучение. Менеджер звонит очень споро.
Пока готовлюсь отбиваться от прямых продаж, ориентирует меня по обучению, подпискам на доступ к профессиональному сообществу и необходимости самостоятельно оценить привлекательность профессии. Расстается на позитивной ноте, в почте письмо-резюме с важными ссылками и навигацией.
Приятно:)
У Яндекс.Практикума 3 схожих курса про интерфейсы, пришлось разбираться, какой подойдет для новичка. В итоге выбираю «веб-разработчик», хотя казалось, так называется несколько другая профессия. Авторизация на курс через Яндекс.паспорт, на почте простыня с описанием курса, ссылками на библиотеку и длинными инструкциями — тоже удобно, почитаю, если не разберусь самостоятельно.
Краткое содержание
12 бесплатных уроков у Хекслета включают теорию и практику верстки, стили, общее понимание построения кода. Дополнительные материалы включают видеоуроки. В этой программе 32 теста и 5 упражнений на тренажере, а еще можно попросить помощь в обсуждении на форуме.
Отдельно поставлю в кавычки «тренажер для кодинга» — это фактически развернутая полноценная среда разработки с идентичной структурой, html-редактором Emmet, проверкой и подсветкой кода. Круто!
Можно написать собственный полноценный проект.
Обучение максимально практическое: краткая теория, обилие ссылок на развернутые материалы, 3 вопроса в тесте... и сразу практика на тренажере. Простенькая задача на html-теги, проверка делается там же автоматически. Анализатор сверяет решение с эталоном, подсказывает, если что-то не так, хвалит при успехе:)
Во введении в курс указано, что теория занимает полчаса, а практика примерно 2 часа на урок, удивительно, но так и вышло.
Пока я бьюсь с версткой в Хекслете, Яндекс многостранично рассказывает о том, как круто учиться: несколько вопросов маркетингового характера, потом длинная история успеха, предостережения о том, что работать надо много, реклама трудоустройства... Честно говоря, пролистываю — скучно и выматывает. Оказывается, первые 10 страниц были уроками. Учеба с 11-го. Теперь понятно, почему привлекают бесплатными 20 занятиями:)
Кстати после пролистывания «10 уроков» внезапно форма оплаты, поздравление с окончание обучения и требование оплатить курс в почте. Ну, такое, извините.
11-й и последующие бесплатные уроки по схеме совпадают с Хекслетом: общие сведения по верстке, теги, стили, скрипты. Уроки теории подаются в формате переписки, с гифками и шутками. Симпатично.
Типичный тренажер похож на онлайн-переводчик: слева окно ввода кода, снизу под ним подсказки и сценарий, справа результат проверки. Аскетично, просто, но не раскрывает тему: html-редактор работает рандомно, при ошибке в коде сообщается, что «тренажер еще не умеет проверять синтаксические ошибки, попробуйте снова».
Для сравнения в Хекслете по коду бегает отладчик и ругается на конкретное нарушенное условие. Обидно, но честно.
Бесплатный сыр такого сорта
Если сравнить две школы, то моя благосклонность и мотивация на стороне Хекслета, объясню почему. Плюсы:
1. Удобный личный кабинет: наглядный, простой, без лишних ссылок
2. Формат обучения: теория, дополнительные материалы, тренажер доступны с любой страницы, подсказки и ссылки под рукой, растеряться не получилось.
3. Структура курса от простого к сложного, упор на практику.
4. Развернутая среда разработки, позволяющая увидеть работу в реальном времени.
5. html-редактор, отладчик кода, анализатор выполнения полностью погружают в рабочий процесс. В этом месте легко определиться ваше ли это призвание — копаться в запятых?;)
6. Полный курс построен на постоянном взаимодействии с практиками, общением в Slack с настоящими «фронтами», реализацию 4 разных проектов, прокачивающих и hard, и soft скилы. Это важно для будущей командной работы.
7. Стоимость курса и подписки на доступ к сообществу адекватно стоят того.
Минусы:
1. Если хочется больше теории, придется гуглить, так как здесь она подается без воды. Видеоуроки как дополнительные материалы могут расстроить визуалов. По содержанию нареканий, впрочем, нет.
2. Даже самое первое задание в тренажере сложное, в отладчике нужно разобраться, никто не нянчится.
Яндекс.Практикум обладает несомненными плюсами:
1. Обилие теории для любителей почитать. Много подготовительных материалов, настраивающих на погружение в атмосферу самой компании.
2. Практические задания простые, решаются легко и настраивают на успех.
3. Со 2 упражнения упор на скрипты, магия завораживает.
4. Игровая форма обучения, шутки, гифки, забавная верстка очень привлекательны.
И всё-таки минусы:
1. В процессе обучения ВНЕЗАПНО окно оплаты курса.
2. Тренажер без отладчика, если что-то некорректно, выводит ошибку и извиняется, что не умеет в конкретику. В одном задании была ошибка синтаксиса, в другом — логическая.
3. Стоимость, кажется, формируется больше из-за бренда, а не из ценности подхода и знаний.
Курс обучения и в Хекслете, и в Яндекс.Практикум 10 месяцев, старт примерно в одно время. И тот, и другой предлагает наставничество и погружение в сообщество.
Программы схожи — было бы странно, если бы различались, — практика разнится. У Яндекса типичный тренажер, далекий от реальности. Первые задания подкупают простотой, у Хекслета взрослый подход сразу.
Конечная цель всё-таки сменить профессию и выйти на начальный профессиональный уровень, чтобы продать себя в коммерческую практику. Именно этот подход считывается в занятиях у Хекслета и подкупает меня.
Сухой итог: продолжаю учиться у Хекслета, старт полноформатного курса уже на походе, поэтому набираю темп в бесплатных тренировках.
Показать полностью
IT: Найти общий язык
Лет 15 назад всё началось с попытки найти общий язык с друзьями админами. Так я провалилась в эникей. Потом перешла в коммерческий продукт на поддержку, где нужно взаимодействовать с разработкой. Вопрос перевода с человеческого на прогерский встал остро, поэтому пробежалась по тогдашним курсам для ламеров про веб.
Последние лет 5 работаю проджектом, диалог с командами сложился настолько, что хочется в туда, в интерфейсы. Понятно, что каждая собака сейчас лезет с сертификатом о курсах на перевес, что сильно усложняет выбор источника знаний. От рекламной воды слегка укачивает, продолжаю изучение, всё как под копирку.
Тип данных String в JavaScript
string - примитивный тип данных, представляет собой цепочку элементов использующую кодировку UTF-16, вне зависимости от кодировки которую использует страница. Больше уроков у меня на канале UTF-16 описывает возможность хранения символов unicode с помощью 16 или 32 битных значений. Любые текстовые данных в JavaScript являются строкой в том числе и JSON.
Можем создавать строки разными способами:
// Одинарные кавычки
const stringExample_1 = 'Hello world #1';
const stringExample_2 = "Hello world #2";
// Двойные кавычки
Выбирать одинарные кавычки или двойные кавычки зависит от того какие символы встречаются внутри строки.
Если в вашей строке встречаются апострофы или вы просто используете одинарные кавычки внутри своей строки и ваша строка создана также с помощью одинарных кавычек, внутренние кавычки нужно будет экранировать с помощью обратного слэша (\).
const stringExample_3 = 'I am \'not\' sentient';
// Аналогично и с двойными кавычками.
const stringExample_4 = "I am \"not\" sentient";
// Решаем ситуацию проще, используя один тип кавычек внутри другого.
const stringExample_5 = 'I am "not" sentient';
Обратные кавычки
Шаблонные строки или шаблонные литералы.
Внутри обратных кавычек мы можем вычислять какое-то выражения или подставлять значение переменной, предварительно обернув его в ${}, этот функционал доступен только при использовании обратных кавычек.
const stringExample_6 = `Hello world #3`;
const stringExample_7 = `Hello world #${2+2}`;
const helloWorldNumber = 5;
const stringExample_8 = `Hello world #${helloWorldNumber}`;
Важно! То что мы передаем внутрь ${} будет преобразовано в строку.
Мы можем добиться аналогично поведения если будем использовать оператор '+' и одинарные или двойные кавычки. Это операция называет 'конкатенация строк'.
const stringExample_9 = 'Hello world #' + 6;
const stringExample_10 = "Hello world #" + 7;
Для того чтобы узнать количество символов в строке мы можем обратится к ее свойству length.
const stringExample_11 = 'Hello world #';
console.log(stringExample_11.length); // 13 символов
Для того чтобы получить символ из строки вы можете обратиться к нему по его индексу. Индексирование строк начинается с 0 и заканчивается количеством ее символов минус 1.
const stringExample_12 = 'Hello world #9';
const firstChar = stringExample_12[0]; // H
const thirdChar = stringExample_12[2]; // l
const lastChar = stringExample_12[stringExample_12.length - 1]; //9
Иммутабельность строк
Строки неизменяемы, это значит что вы не сможете заменить букву в строке обративший к ней по индексу и присвоив ей новое значение. Для того чтобы изменять строку вам нужно будет использовать отдельные функции и методы.
const stringExample_13 = 'Hello world #10';
// Заменяем первый символ строки.
stringExample_13[0] = 'Q';
console.log(stringExample_13); // 'Hello world #10'
Строка не изменилась
Также в строках мы можем использовать unicode символы
console.log('\u{1F60D}')
P.S. Больше уроков у меня на канале
P.P.S. Файлы с урока
Показать полностью