Примеры JavaScript

Скрипты, которые мы будем создавать при изучении JavaScript, будут располагаться на HTML страницах. Для них будет использован тот же шаблон, который использовался в предыдущих учебниках. На некоторых страницах не будет видимых элементов, а будет только скрипт. Поэтому внутри тэга <body> будет находиться только тэг <script> в котором расположен код скрипта. Получится такая страница:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!DOCTYPE html>
<html>
<head>
<title>Страница</title>
<meta charset="utf-8">
</head>
<body>
<script>
let x;
x = 5;
let y = x * 8 + 24;
alert(x);
</script>
</body>
</html>

Как и в других учебниках, я не буду в примерах писать строки, которые есть на каждой странице. Такой пример в учебнике будет выглядеть так:

JavaScript:

9
10
11
12

let x;
x = 5;
let y = x * 8 + 24;
alert(x);

Пример начинается с 9 строки, потому что именно с этой строки начинается код скрипта на странице. Не забывайте ставить тэг <script>. Лучше сразу добавлять его на страницу, а потом писать внутри него код.

В некоторых примерах будут присутствовать элементы страницы, к которым применяется скрипт. Тогда получится примерно такая страница:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE html>
<html>
<head>
<title>Страница</title>
<meta charset="utf-8">
</head>
<body>
<div id="block">Блок
<p class="art">Абзац в блоке</p>
<p class="art">Ещё один абзац в блоке</p>
</div>
<script>
let block = document.getElementById('block');
console.log(block);
</script>
</body>
</html>

Такой пример будет выглядеть так:

HTML код:

8
9
10
11

<div id="block">Блок
<p class="art">Абзац в блоке</p>
<p class="art">Ещё один абзац в блоке</p>
</div>

JavaScript:

18
19

let block = document.getElementById('block');
console.log(block);

Некоторым элементам страницы нужно будет установить стиль. Как и в учебнике CSS, стиль указывается в тэге <style> внутри тэга <head>. Страница получится такая:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!DOCTYPE html>
<html>
<head>
<title>Страница</title>
<meta charset="utf-8">
<style>
div
  {
  border: 1px solid Red;
  }
</style>
</head>
<body>
<div id="block">Текст</div>
<div id="newblock">Другой блок</div>
<script>
let block = document.getElementById('block');
block.style.padding = '10px';
</script>
</body>
</html>

Этот пример будет выглядеть так:

Стиль:

7
8
9
10

div
  {
  border: 1px solid Red;
  }

HTML код:

14
15

<div id="block">Текст</div>
<div id="newblock">Другой блок</div>

JavaScript:

17
18

let block = document.getElementById('block');
block.style.padding = '10px';

Пример нужно изучать так:

Cначала нужно смотреть HTML код и увидеть, какие элементы есть на странице.
Затем нужно посмотреть стиль элементов.
Затем рассмотреть скрипт, который работает с элементами.

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