Братки JavaScript-а

JavaScript простым языком

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

HTML

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

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

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

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

Пример парного тега:

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

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

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

Хочу предупредить, что не все теги являются парными, например:

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

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

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

CSS

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

Пример 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 код отделен от другого, что дает возможность проще разбираться в самом коде и не говнокодить.

Подытожим

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

Ссылки:

Learn 1. JavaScriptStupid

Learn-1.1-JavaScriptStupid

PreviousВвод в JavaScript. Что это? И для чего нужен?NextПеременные в JavaScript

Last updated 4 years ago