Веб-разработка + Урок

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

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

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

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

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

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

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. Больше уроков у меня на канале

Одна из важных концепций HTML это атрибуты и их значения.

<img src="./images/html-syntax.png" alt="HTML Syntax">

В примере выше мы используем тег одиночный тег <img>, для того чтобы добавить изображение на нашу страницу.

Для того чтобы сказать браузеру, какое именно изображение мы хотим показать на странице мы используем атрибут src и в качестве его значения указываем путь к файлу изображения. Таким образом браузер поймет что именно мы хотим показать на странице.

<p>
<a href="https://github.com" target="_blank" title="Popup info" id="link" class="link">
Github
</a>
</p>

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

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

<section>
<p class="paragraph" title="some additional info">
Lorem ipsum dolor sit amet.
</p>
<a href="https://github.com" target="_blank" class="link" title="title info">
Link to github
</a>
</section>

Существует 3 типа атрибутов, универсальные, уникальные и атрибуты событий.

Универсальные - атрибуты которые можно установить любому существующему тегу из пример выше можно понять что атрибуты class и title являются универсальными атрибутами. Так как мы можем их добавить любому тегу.

Уникальные - атрибуты, которые есть у определенных тегов или у определенного набора тегов. Одним из таких атрибутов является атрибут href тега <a>, а также атрибут target тега <a> тоже является уникальным.

Атрибуты событий - нужны для того связывания обработчиков событий с элементами на которых они должны срабатывать. Обработчики событий это JavaScript функции которые срабатывают при срабатывании события на элементе, например события клика по элементу.

Пример атрибута события

<p onclick="alert('Hello world!')" >
<mark>Lorem ipsum dolor sit amet.</mark>
</p>

Из чего состоит тег ?

Видеоурок на эту тему