Давайте начнем программировать на языке программирования JavaScript с помощью простого текстового файла и вашего веб-браузера. Я использую TextEdit в macOS и веб-браузере Brave, но вы можете использовать практически любой современный текстовый редактор и веб-браузер, какие захотите.

Создайте новый текстовый файл на рабочем столе с текстом «JavaScript!» и назовите его «JavaScript.html».

Теперь мы заменим «JavaScript!» текст со следующим, который представляет собой разметку HTML для сообщения веб-браузеру, что этот файл следует рассматривать как тип документа HTML, и что есть «html» «тело» (которое является основной областью веб-страницы) и что мы хотим для стилизации фона этой основной области цветом фона со значением «f6c63c». Это компьютерное значение цвета является кодом приятного желтовато-оранжевого цвета.

‹!DOCTYPE html›
‹html›
‹body style="background-color: #f6c63c;"›
‹/body›
‹/ HTML›

Обратите внимание: после того, как вы введете это в текстовый файл «JavaScript.html», вам нужно будет сохранить его, а затем нажать кнопку «Обновить» в браузере, чтобы увидеть изменения.

У нас есть фон веб-страницы, но теперь нам нужен холст для рисования, как художнику может понадобиться белый холст для рисования. Итак, мы можем добавить HTML-теги «canvas» между двумя тегами ‹body› ‹/body›. Это мы идентифицируем как «myCanvas» и дадим размер по ширине и высоте 400 в ширину и 300 в высоту.

‹canvas id=”myCanvas” width=”400’ height=”300’›‹/canvas›

Если вы поместите этот HTML-тег холста и обновите его, вы заметите, что ничего не произошло! Это потому, что нам нужно покрасить холст в белый цвет, если мы хотим, чтобы он был белым, потому что веб-браузер не предполагает, какой цвет вы хотите для своего холста, и именно тогда мы начинаем добавлять код JavaScript!

Итак, сразу после тегов холста мы добавим наши первые 4 строки кода JavaScript, которые нам нужно обернуть внутри тегов ‹script› и ‹/script›.

‹script›
var canvas = document.getElementById(“myCanvas”);
var ctx = canvas.getContext(“2d”);
ctx.fillStyle = “ #ffffff”;
ctx.fillRect(0, 0, canvas.width, canvas.height);
‹/script›

Если эти 4 строки кода JavaScript еще не имеют смысла, не волнуйтесь, вы доберетесь до цели. На данный момент, чтобы немного объяснить, мы используем код JavaScript, чтобы сообщить веб-браузеру, внутри какого холста мы хотим рисовать, мы говорим, что это будет 2D против 3D, мы создаем стиль заливки «ffffff». (белый) и указание браузеру заполнить прямоугольник, будет этот цвет белым с координатами 0,0 по всей ширине и высоте холста.

Отлично, теперь мы нарисовали белый холст, чтобы продолжить рисовать любыми цветами или формами, которые мы хотим использовать дальше. Поскольку я люблю многоугольники, я начну с одного из самых простых правильных многоугольников — квадрата. Чтобы добавить цветной квадрат на наш чистый белый холст, мы можем добавить следующие 2 строки кода прямо перед закрывающим HTML-тегом ‹/script›.

ctx.fillStyle = "#586cdc";
ctx.fillRect(100, 100, 100, 100);
‹/script›

Теперь мы устанавливаем новый стиль заливки голубоватым цветом, а затем заливаем прямоугольник/квадрат, который начинается с координат 100 100. Затем другие «100, 100» говорят ему рисовать еще 100 пикселей (координатных точек) как по горизонтали, так и по вертикали.

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

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

Следующее, что мы собираемся сделать, это поместить 2 строки кода для нашего голубоватого прямоугольника в «функцию», которая позволяет нам рисовать квадрат, когда нам нужна эта функциональность. Итак, если мы используем следующий код, он отрисовывает синеватый квадрат только после ожидания 3000 миллисекунд. Это потому, что мы обернули 2 строки для нашего квадрата внутри функции с именем «drawRect».

function drawRect() {
ctx.fillStyle = “#586cdc”;
ctx.fillRect(100, 100, 100, 100);
}
setTimeout(() =› drawRect(), 3000);

Если вы попробуете это, вы должны увидеть белый холст, а затем через 3 секунды должен появиться голубоватый квадрат, но сейчас мы отключим таймер «setTimeout», поэтому нам не нужно ждать, пока все закончится. появиться на нашем холсте.

Вместо этого, поскольку у нас есть квадрат как «функция», мы можем делать некоторые забавные вещи, такие как добавление случайных значений ширины и высоты и рисование нескольких прямоугольников. Чтобы увидеть это, измените свой код, чтобы он соответствовал следующему фрагменту кода.

function drawRect() {
var randomWidth = Math.random() * 100;
var randomHeight = Math.random() * 100;
ctx.fillStyle = “ #586cdc”;
ctx.fillRect(100, 100, randomWidth, randomHeight);
}
drawRect();
drawRect();

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

Мы можем сделать тот же JavaScript Math.random number, который мы сделали для ширины и высоты, а также для местоположения. Две новые строки JavaScript используют «var randomX» и «var randomY» для получения новых случайных вертикальных и горизонтальных координат на нашем холсте. Чтобы убедиться, что прямоугольники остаются в области холста, мы вычитаем случайную ширину и высоту из ширины и высоты холста. Убедитесь, что ваша функция drawRect() соответствует приведенному ниже коду.

function drawRect() {
var randomWidth = Math.random() * 100;
var randomHeight = Math.random() * 100;
var randomX = Math. random() * (canvas.width - randomWidth);
var randomY = Math.random() * (canvas.height - randomHeight);
ctx.fillStyle = "#586cdc";
ctx.fillRect(randomX, randomY, randomWidth, randomHeight);
}
drawRect();
drawRect();

Вероятно, вы начинаете понимать силу функций! Теперь, когда у нас есть функция, мы можем добавить функцию drawRect(); чтобы вызвать функцию столько раз, сколько мы хотим. Мы могли бы добавлять его сто раз и генерировать 100 случайных прямоугольников одновременно! Хммм… есть идея, давайте сделаем что-то подобное!

Но… не знаю, как вам, а мне определенно не хочется копировать и вставлять «drawRect();» сто раз, поэтому давайте воспользуемся решением JavaScript, которое помещает вызов этой функции в цикл.

function drawLoop() {
window.setInterval(() =› {
drawRect()
}, 50);
}
drawLoop ();

Итак, давайте заменим drawRect(); с новой функцией drawLoop(), а затем вызовите эту функцию вместо вызова drawRect(); в конце нашего кода JavaScript.

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

Одна вещь, которую мы могли бы сделать, это изменить цвет заливки прямоугольника: ctx.fillStyle = «#586cdc»; чтобы использовать цветовую заливку типа Красный+Зеленый+Синий+Альфа, где мы можем установить альфа-канал для создания полупрозрачности.

ctx.fillStyle = "rgba(88, 108, 220, 0,25)";

Хорошо, выглядит довольно интересно, почти как скринсейвер, который у меня был много лет назад. Но мы хотим большего, вы говорите? Хорошо, давайте посмотрим, что мы можем сделать с еще несколькими строками JavaScript, чтобы добавить границы к этим прямоугольникам. Сделайте так, чтобы ваша функция drawRect() соответствовала следующему фрагменту кода с тремя новыми строками в нижней части функции.

function drawRect() {
var randomWidth = Math.random() * 100;
var randomHeight = Math.random() * 100;
var randomX = Math. random() * (canvas.width — randomWidth);
var randomY = Math.random() * (canvas.height — randomHeight);
ctx.fillStyle = «rgba(88, 108, 220, 0,25)»;
ctx.fillRect(randomX, randomY, randomWidth, randomHeight);
ctx.strokeStyle = «red»;
ctx.lineWidth = «3»;
ctx .strokeRect(randomX, randomY, randomWidth, randomHeight);
};

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

И… это конец учебника по кодированию JavaScript — часть 1