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

Имена переменных

При именовании переменных нам нужно придерживаться определенных правил:

1. Имя переменной должно содержать только буквы, цифры или символы $ и _.

let user = 'John';
let $user = 'Alice';
let _user = 'Pete';
let user2 = 'Antony';
let u2s3e4r = 'Alex'; // Так лучше не делать, но это будет работать

2. Первый символ в имени не должен быть цифрой.

let 10user = 'Nick'; // Ошибка!

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

let mentor = 'John Doe'; // Good
let ментор = 'Alice Cooper'; // Bad

4. Имя переменной должно отражать смысл того что она хранит.

let age = 20;
let color = 'red';
let sum = 10 + 10;
let salary = '0$';

Как быть если имя переменной должно состоять из нескольких слов ? На самом деле у есть много стилей именования переменных.

Например:

let snake_case = 'Слов пишутся без пробелов, вместо пробела используется символ _';

let PascalCase = 'Слова пишутся без пробелов и все с большой буквы';

let camelCase = 'Слова пишутся без пробелов, начиная со второго слова все пишутся с большой буквы';

let kebab-case = 'Слов пишутся без пробелов, вместо пробела используется символ -';

В JS вызывает ошибки так как символ '-' не разрешен для использования в именах переменных, также kebab-case еще называю шашлычным регистром. При написании кода на JavaScript мы в основном используем camelCase.

let userAge = 20;
let userFirstName = 'John';
let userLastName = 'Doe';
let userFullName = userFirstName + ' ' + userLastName;
let userSuperLongVariableName = 'Value';

Константы

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

const API_URL = 'https://api.url/posts';
const DATABASE_NAME = 'junjun_db';
const COLOR_WHITE = '#ffffff';
const COLOR_BLACK = '#000000';

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

Вот ссылочка на урок

P.S. Больше уроков у меня на канале

<select> - элемент содержащий меню опций <option> или меню групп опций <optgroup>.

Имеет схожие с <input> атрибуты, а также атрибуты multiple и size.

Обычно select располагается внутри тега <form> или связывается с ним атрибутом form. Но его также можно не встраивать в <form>.

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

Ссылка на CodePen

<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>

Ссылка на CodePen

<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>

Ссылка на CodePen

Атрибут 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>

Ссылка на CodePen

P.S. Больше уроков у меня на канале.

P.P.S. Ссылка на git репозиторий.

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

Строчные элементы в HTML - ссылка на материалы

Файлы с урока - GitHub repo

Документация на строчные элементы - ссылка

Мои соц. сети:

Telegram

LinkedIn

Twitter

Facebook

Instagram

----------- ТРАНИСКРИПТ УРОКА -------------

В современной верстке выделяется 2 типа элементов:

• Блочные (block level) - в основном, отвечают за каркас страницы.

• Строчные (inline level) - в основном, помогающие нам при стилизации страницы и тд.

Строчные элементы

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

Основные списочные элементы: span, a, i, b, strong, em

Мы можем вкладывать строчные элементы в блочные и в другие строчные элементы, но вкладывать блочные элементы в строчные не рекомендуется, так как это нарушает семантику и усложняет чтение кода.

ВАЖНО!

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

P.S. Больше курсов у меня на канале

<input> - тег который мы вкладываем внутрь тега <form>, с помощью него мы будем создавать интерактивные поля для ввода информации пользователем.

Тег <input> можно использовать и вне тега <form>.

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

<input type="text">
<input type="number">
<input type="email">
<input type="tel">
<input type="checkbox">
<input type="radio">
<input type="button" value="Submit">
<input type="submit" value="Submit">
<input type="color">
<input type="date">
<input type="time">
<input type="file">
<input type="hidden">
<input type="password">
<input type="range">
<input type="url">

Это основные типы тега <input>, в зависимости от типа тега он может принимать какие-то атрибуты или не принимать их, об этом лучше читать в документации.

Рассмотрим несколько атрибутов на примере стандартного input для ввода текста.

<input type="text" value="Some text here">

value - позволяет нам определить или предопределить значение тега input.

<input type="text" placeholder="First name">

placeholder - определяет текст, который будет показа пользователь внутри input до того момента пока пользователь не начнет вводить свое значение. Доступен не всем типам input.

<input type="text" required>

required - определяет, будет ли обязательным этот input в рамках текущего тега <form>.

<input type="text" disabled>

disabled - определяет, будет ли у пользователя возможность редактировать содержимое input

<input type="text" pattern="">

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

<input type="text" name="first_name">

name - задает имя для нашего input

<form id="form_id"></form>
<input type="text" form="form_id">

Атрибут form - позволяет связать input с тегом <form>, input лежит вне тега <form>.

Атрибутов <input> существует огромное количество, мы рассмотрели только самые распространенные.

Label - <label>

Это тег позволяющий указывать подпись для элемента, обычно используется вместе с тегом input. input и label можно связать с помощью id для input и for для label.

<form action="">
<h2>Contact form #1</h2>
<div>
<label for="first_name">First name:</label>
<input id="first_name" type="text" placeholder="First name">
</div>
</form>

Также мы можем положить внутрь <label> тег <input> в таком случае они свяжутся автоматически и нам не нужно указывать атрибуты for и id.

<form action="">
<h2>Contact form #2</h2>
<div>
<label>
<span>First name</span>
<input type="text" placeholder="First name">
</label>
</div>
</form>

Пример

<form action="">
<h2>Contact form #3</h2>
<div>
<label for="user_name">First name:</label>
<input id="user_name" type="text" placeholder="User name">
</div>
<div>
<label>
<span>User surname:</span>
<input type="text" placeholder="User surname">
</label>
</div>
<div>
<input type="submit" value="Submit">
<input type="reset" value="Reset from">
</div>
</form>

P.S. Больше уроков у меня на канале.

P.P.S Для тех кто хочет посмотреть код - ссылка на git репозиторий