Братки JavaScript-а

Вот и пришло время начать хоть немножко кодить, а не разговоры разговаривать. Так что напрягай свой мозг и поехали!

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

В предыдущей статье (клац), я упоминал братьев JavaScript – это HTML и CSS. Короче, ты, наверное, подумал, что я совсем хуйца на это забил, но нет, не совсем. Коротко попробую донести че это за перцы такие.

HTML

Каждая веб-страничка, которую ты видишь – состоит из разметки(эта разметка и называется HTML(HyperText Markup Language)). Разметка – это фундамент страницы. Выглядит он в базовом виде, примерно так:

<!DOCTYPE html>
<html>
<head>
  <title>Title Page</title>
</head>
<body>
 Здесь располагается все, что должен увидеть пользователь
</body>
</html>

Этот код нужно сохранять в файле формата html (например, page.html).

Надеюсь ты видишь, что тут есть разные слова, заключенные в скобари <>. Так вот, это не просто так, из разряда – че хочу, то и пишу, а эти штуки называются тегами. Они практически все являются закрывающими. Это означает, что после того, как ты его открыл, ты должен его закрыть. Браузер не терпила какой-то, ебнет тебе по лбу и скажет, что ты рукожоп и пошлет тебя ...исправлять код.

Пример закрывающегося тега:

<b>Этот текст будет жирным</b>
<u>Этот текст будет подчеркнутым</u>

Как видишь, я сначала открываю тег, пишу внутри него, то что хочу, а затем закрываю его. Думаю, ты заметил чем отличается тег открытия и закрытия. Только одним /. Но запомни, этот слэш очень важный.

Но, хочу предупредить, что не все теги являются закрывающимися, например:

<br> - тег переноса строки
<hr> - горизонтальная линия, которая как бы отчеркивает содержимое
<img> - отображение картинки на странице
и д.р.

Весь список погугли и посмотри, понадобится.

В целом, HTML служит для того, чтобы разделить информацию на логические блоки, для того, чтобы проще этим было управлять(через тот же JS) и оформлять через CSS.

CSS

Так, че ж это за карась такой? Это так называемые каскадные таблицы стилей (Cascading Style Sheets). Они служат для того, чтобы навести марафет на странице. Через них, например, устанавливают цвет фона страницы, размеры шрифтов, цвет этих же шрифтов, устанавливают позиционирование элементов относительно друг друга, относительно окна и так далее. Т.е., из этих трех братков CSS – до хуя художник.

Пример CSS-кода:

.paragraph-1 {
  color: green;
  font-size: 16px;
  font-weight: bold;
}

.paragraph-2 {
  text-align: center;
  text-transform: uppercase;
}

Этот код(чаще всего это называют не кодом, а правилами) применится к любому элементу(тегу) на странице, у которого будет прописан атрибут class="paragraph-1" или class="paragraph-2", и даже можно так class="paragraph-1 paragraph-2" (в этом случае к элементу с таким атрибутом применятся и правила paragraph-1 и правила paragraph-2), например:

<p class="paragraph-1">
 Этот текст будет зеленым, шрифт будет жирным и размером 16px
</p>

<p class="paragraph-2">
 Этот текст будет распологаться по центру страницы и будет написан прописными буквами
</p>

<p class="paragraph-1 paragraph-2">
 Этот текст будет зеленым, шрифт будет жирным, он будет распологаться 
по центру страницы и написан прописными буквами. Правило на размер 
шрифта 16px не отработатает, потому что у нас есть правило
text-transform: uppercase; которое явно указывает на то, чтобы все буквы 
были заглавными
</p>

CSS-код подключается к странице двумя способами:

Просто пишем CSS-код внутри тега <head> до его закрытия(</head>), обрамив сам код в тег <style>...</style>;
Подключается через файл.

Первый способ. Тег <style>...</style>

HTML-код:

<!DOCTYPE html>
<html>
<head>
  <title>Title Page</title>
  <link href="styles.css" rel="stylesheet">
 <style>
  .paragraph-1 {
    color: green;
    font-size: 16px;
    font-weight: bold;
  }
  
  .paragraph-2 {
    text-align: center;
    text-transform: uppercase;
  }
   </style>
</head>
 <body>
    <p class="paragraph-1">
     Этот текст будет зеленым, шрифт будет жирным и размером 16px
    </p>
    
    <p class="paragraph-2">
     Этот текст будет распологаться по центру страницы и будет написан прописными
буквами
    </p>
 </body>
</html>

Второй способ

Создаем отдельно файл формата .css, запихиваем туда наш CSS код и подключаем с помощью незакрывающегося тега <link> к странице HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Title Page</title>
  <link href="./styles.css" rel="stylesheet">
</head>
<body>
 <p class="paragraph-1">
  Этот текст будет зеленым, шрифт будет жирным и размером 16px
 </p> 
 <p class="paragraph-2">
  Этот текст будет распологаться по центру страницы и будет написан прописными буквами
 </p>
</body>
</html>

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

Подытожим.

Я надеюсь, с помощью этого материала я смогу направить тебя на путь истинный и ты сделаешь 12 запросов во имя HTML, CSS и святого JS и доразберешься в теме.

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

Ссылки:

Мы все ближе и ближе к цели – начать кодить на самом JavaScript. Это будет уже в следующем материале.

А пока, ты можешь выбрать для себя редактор кода: О редакторах кода