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

Symbol

symbol — это уникальный и неизменяемый тип данных, который может быть использован как идентификатор для свойств объектов. Для создания символьного примитива мы можем использовать функцию Symbol([описание]).

// Создаём новый символ
let symbolExample_1 = Symbol();

// Символы всегда уникальны, даже если мы создадим их с одинаковым описанием.

let symbolExample_2 = Symbol('id');
let symbolExample_3 = Symbol('id');
console.log(symbolExample_2, symbolExample_3)
console.log(symbolExample_2 === symbolExample_3); // false
console.log(symbolExample_2 == symbolExample_3); // false

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

Попробуем вызывать alert, функция alert автоматически преобразовывает переданное ей значение в строку и выводит его.

alert(symbolExample_3);
Uncaught TypeError: Cannot convert a Symbol value to a string

Для того чтобы преобразовать в строку мы можем использовать метод toString.

let symbolExample_4 = Symbol('id').toString();
alert(symbolExample_4)

Или обратится к его описанию

let symbolExample_5 = Symbol('id');
alert(symbolExample_5.description)

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

Файлы с урока

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

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

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

Поддержи автора и подпишись на мой youtube и telegram

Datalist

<datalist> - содержит набор опций (<option>), доступных для выбора. Выбранное значение будет установлено для элемента <input>, с атрибутом list.

Не стоит использовать его вместо тега <select>, но можно использовать как вспомогательный тег для <input>. Причина в том что его сложнее обрабатывать через JavaScript.

<form action="">
<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />
<datalist id="ice-cream-flavors">
<option value="Chocolate">
<option value="Coconut">
<option value="Mint">
<option value="Strawberry">
<option value="Vanilla">
</datalist>
</form>

Fieldset

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

<form action="#">
<h3>Registration form</h3>
<fieldset>
<div>
<label for="name_input">First name:</label>
<input id="name_input" type="text" placeholder="Email">
</div>
<div>
<label for="surname_input">Surname:</label>
<input id="surname_input" type="text" placeholder="Surname">
</div>
</fieldset>
<br>
<fieldset disabled>
<div>
<label for="email_input">Email:</label>
<input id="email_input" type="text" placeholder="Email">
</div>
<div>
<label for="password_input">Password:</label>
<input id="password_input" type="text" placeholder="Password">
</div>
</fieldset>
</form>

У <fieldset> также есть несколько атрибутов, которые помогают управлять сразу всей группой <input>.

name - задает общее имя для группы

disabled - делает группу недоступной для редактирования

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

<form action="" id="example_form">
<h3>Example form</h3>
<label>
<input type="text" placeholder="Some example input">
</label>
</form>
<fieldset form="example_form">
<div>
<label for="name_2_input">First name:</label>
<input id="name_2_input" type="text" placeholder="Email">
</div>
<div>
<label for="surname_2_input">Surname:</label>
<input id="surname_2_input" type="text" placeholder="Surname">
</div>
</fieldset>

Legend

<legend> - Является заголовком для группы элементов, сгруппированных через <fieldset>

<form action="">
<h3>Another Example Form</h3>
<fieldset>
<legend>User info</legend>
<div>
<label for="name_3_input">First name:</label>
<input id="name_3_input" type="text" placeholder="Email">
</div>
<div>
<label for="surname_3_input">Surname:</label>
<input id="surname_3_input" type="text" placeholder="Surname">
</div>
</fieldset>
<br>
<fieldset disabled>
<legend>User credentials</legend>
<div>
<label for="email_3_input">Email:</label>
<input id="email_3_input" type="text" placeholder="Email">
</div>
<div>
<label for="password_3_input">Password:</label>
<input id="password_3_input" type="text" placeholder="Password">
</div>
</fieldset>

Button

<button> - Парный тег, который предназначен для создания кнопки, имеет схожие атрибуты с тегом <input>. Может использовать как внутри <form> заменяя собой <input type="button">, так и просто как отдельный элемент на странице.

<form action="">
<h3>Another Example Form</h3>
<fieldset>
<legend>User info</legend>
<div>
<label for="name_3_input">First name:</label>
<input id="name_3_input" type="text" placeholder="Email">
</div>
<div>
<label for="surname_3_input">Surname:</label>
<input id="surname_3_input" type="text" placeholder="Surname">
</div>
</fieldset>
<br>
<fieldset disabled>
<legend>User credentials</legend>
<div>
<label for="email_3_input">Email:</label>
<input id="email_3_input" type="text" placeholder="Email">
</div>
<div>
<label for="password_3_input">Password:</label>
<input id="password_3_input" type="text" placeholder="Password">
</div>
</fieldset>
<fieldset>
<legend>Form Controls</legend>
<button type="submit">Submit</button>
<button type="reset">Clear Form</button>
</fieldset>
</form>

Файлы с урока

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

В интернете необходимо передавать различные данные и для этого существуют протоколы. Основные из них:

1. HTTP - протокол передачи гипертекста (уже знакомого нам html)

2. HTTPS - то же самое, что и http, но защищенный.

от англ. HyperText Transfer Protocol (Secure)

Но как же браузер открывает сайт?

После ввода адреса сайта и нажатия ENTER, браузер обращается к DNS серверу, в котором находится информация о сайте, тот отправляет браузеру IP-адрес данного сайта.

Потом браузер обращается в сервер с помощью http(s) запроса и тот, если находит нужную информацию, возвращает нам файлы сайта или выдает ошибку :(

Сервер - это компьютер, на котором хранятся файлы. У больших компаний и сайтов, он собственный, но нам такой не нужен. Существуют хостинг-компании, которые предоставляют место для нашего сайта. Они стоят недорого, начиная от 100-150 руб. в месяц. Но об этом подробнее в следующих уроках.

Еще один протокол - это FTP (от англ. File Transfer Protocol) - протокол передачи файлов.

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

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

Селекторы по весу:

1. inline стили (те которые мы пишем внутри атрибута style для тега)

2. #id (селектор id)

3. .class (селектор class и любых других атрибутов кроме id)

4. <tagName> (название тега)

Так как мы можем комбинировать селекторы то и их вес тоже будет складываться.

Пример #1

Пытаемся изменить цвет текста у которого уже написаны inline стили

#p1 {
color: red;
}

Как видим цвет этого элемента не изменился, так происходит потому что у селектора inline стилей селектор тяжелее чем у селектора id, а значит браузер отдаст приоритет селектору inline стилей, а стили которые связаны с id этого элемента будут проигнорированы.

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

.p1 {
color: red;
}

[title="p1"] {
color: red;
}

Пример #2

Работаем с элементов #p2 у которого нет inline стилей.

Задам ему цвет через селектор id.

#p2 {
color: deeppink;
}

Пробуем изменить стили через селектор class

.p2 {
color: blueviolet;
}

и другие селекторы

[title="p2"] {
color: blueviolet;
}
p {
color: blueviolet;
}

Как видим цвет элемента не изменился, а остался таким как был задан в селекторе через id это происходит потому что id имеет больше вес чем остальные селекторы, а на текущем элементе нет никаких inline стилей которые могли бы изменять его цвет.

Пример #3

Что делать если наши селекторы одинаковые по весу?

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

.p3-first {
color: red;
}
.p3-second {
color: green;
}

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

Мой youtube

Мой telegram канал