Мой первый проект на JavaScript, не следуя учебнику
Принять решение о первом проекте по программированию может быть даже сложнее, чем просто начать его. Уже доступны сотни простых проектов, но немногие говорят с вами или могут оказаться полезными. Затем я подумал о чем-то, что могла бы использовать моя семья. Некоторые члены моей семьи играют в техасскую лотерею, поэтому я решил, что это будет мой первый сольный проект, но я не хотел делать это только для одной игры.
Конечно, начинать нужно с простого. Чтобы выполнить любой проект, вы должны разбить его на более мелкие задачи. Я начал с Lotto Texas, которая представляла собой простую лотерейную игру «выбери шесть», где все шесть чисел выбирались из пула от 1 до 54. Поскольку игра выбирает из одного и того же пула все шесть номеров, повторяющихся номеров нет.
По этой причине мне пришлось разбить программу на три задачи: выбрать случайное число, сохранить число в массиве (список, в данном случае список чисел) и проверить, существует ли уже выбранное число в массиве. . Как только я заработал эти задачи, мне нужно было получить числа для отображения на веб-странице.
Генератор случайных чисел
Первое, что мне нужно было сделать, это найти работающий генератор случайных чисел и настроить его на правильный диапазон чисел. Генератор случайных чисел для JavaScript — это Math.random(), который выдает число меньше 1, но больше или равно 0. По этой причине нам нужно будет умножить заданное число на количество чисел в пуле чисел. На данный момент я просто использовал числа от 1 до 10, поэтому я умножил полученное число на 10 (закодировано как «Math.random() * 10»). Это не избавляет от чисел после запятой, поэтому мне пришлось использовать для этого функцию Math.floor(), которая теперь закодирована как Math.floor(Math.random() * 10). Однако это дает только числа 0–9, а не 1–10, поэтому мне пришлось добавить 1 к результату. (Math.floor(Math.random() * 10) + 1), сохраняя число в переменной с именем results, я наконец получил числа, чтобы они отображались так, как я хотел.
После этого мне пришлось установить код в функцию. Функция просто делит ваш код на отдельные задачи и упрощает многократное обращение к нему. в этот момент код функции выглядел так.
function lottoBall() {
return Math.floor(Math.random() * 10) + 1;
}
Цикл и массив
После этого мне пришлось изменить переменную с одного числа на массив, чтобы я мог хранить несколько чисел в одной переменной. Я включил свой генератор случайных чисел в функцию, которая является просто способом отсортировать вашу задачу программирования в одном месте, где ее можно вызывать несколько раз.
Я хотел позвонить по 6 номерам, поэтому простой цикл for показался мне лучшим сценарием. Цикл for определяет, сколько раз может быть запущена задача. Поскольку я задал генератору случайных чисел собственную функцию, мне просто пришлось вызывать эту функцию шесть раз и сохранять каждое число в массиве, поэтому код выглядел так, как показано ниже.
for (пусть x = 0; x ‹ 6; x++){
results.push(lottoBall());
}
Цикл for устанавливает переменную x в 0 и указывает циклу работать до тех пор, пока переменная не достигнет значения 6. Выражение x++ каждый раз увеличивает переменную x на 1. Функция push — это функция, используемая только для массивов, и она сохраняет все, что находится в круглых скобках в конце массива.
Однако, имея всего 10 выборочных номеров, я мог иногда сталкиваться с проблемой появления повторяющихся номеров. Мне нужно было средство, чтобы программа проверяла, является ли номер дубликатом перед сохранением номера.
Дубликат проверки
В этом случае мне нужно было настроить цикл do-while, который запускает задачу один раз, прежде чем проверять, соответствует ли она условию. Если он удовлетворяет условию, он повторяет задачу. Настроив другую функцию для проверки дубликатов, я настроил код ниже.
function дубликатCheck(){
do{
let ball = 0;
ball = lottoBall();
} while(results.includes(ball));
results .push(мяч);
}
Я установил ball как локальную переменную в этой функции, которая будет сбрасываться на 0 каждый раз, когда цикл запускается. Локальная переменная — это переменная, которая объявлена и используется только внутри функции. Принимая во внимание, что results устанавливается как глобальная переменная, устанавливается вне всех функций и может использоваться всеми функциями. У меня была функция lottoBall(), вызывающая число, которое будет сохранено в переменной ball. Затем для условия while я использовал функцию include(), чтобы проверить, сохранено ли число, хранящееся в ball, в массиве результатов. Если он находит совпадающее число, он будет повторять задачу до тех пор, пока число не будет совпадать ни с каким другим числом.
Поскольку я уже сохранял число в результатах массива, я вернулся к предыдущему циклу for и вместо этого вызвал функцию DuplicateCheck(), так что теперь это выглядело так, как показано ниже.
for (пусть x = 0; x ‹ 6; x++){
DuplicateCheck();
}
На данный момент я успешно получил функцию для хранения шести чисел в массиве и убедился, что каждое число уникально. Однако мне пришлось вернуться и изменить выражение в функции lottoBall(), чтобы оно возвращало Math.floor(Math.random() * 54) + 1, чтобы оно действительно соответствовало формату Lotto Texas. Цикл for я сохранил в собственной функции getResults(), а начальный код был настроен следующим образом.
const results = [];
getResults();
displayResults();
Он устанавливает результаты как пустой глобальный массив, но вы заметили, что я вызвал новую функцию с именем displayResults(). Теперь пришло время взять числа из массива и отобразить их на веб-странице.
Отображение чисел
Теперь нам нужно погрузиться в HTML и CSS и выполнить небольшую манипуляцию с объектами документа в JavaScript. В отдельном файле, отличном от JavaScript, мы собираемся создать файл HTML со следующим кодом.
‹html›
‹head›
‹title›Lone Star Quick Picks‹/title›
‹link rel="stylesheet" href="style.css"›
‹/ head›
‹body›
‹h1 class="title"›Lone Star Quick Picks‹/h1›
‹div class="results" id="results"›‹/div›
‹script src="script.js"›
‹/body›
‹/html›
Теги link и script позволяют вам связать файлы CSS и JavaScript с вашим HTML, не загромождая ваш HTML. Я использовал имена файлов style.css и script.js для соответствующих файлов CSS и JavaScript, но вы можете использовать любые названия файлов, если они заканчиваются одинаковыми расширениями файлов (.css для CSS и .js для JavaScript). ). Тег div — это обычный тег блока, в котором вы можете хранить что угодно. Мы оставляем его пустым, чтобы JavaScript мог хранить эти данные для нас. Мы дали ему класс и атрибут id для использования как в CSS, так и в JavaScript.
Теперь о JavaScript. Нам нужен JavaScript для вызова тега div из HTML-файла, поэтому мы воспользуемся строковой функцией document.getElementById(‘results’) и сохраним ее в переменной с именем element. Затем нам нужна функция для создания большего количества HTML в этом теге div.
function displayResults(){
const element = document.getElementById('results');
for (пусть x = 0; x ‹ 6; x++){
const result = document.createElement( 'div');
result.innerText = results[x];
element.appendChild(result);
}
}
Это делает то, что он повторяет один и тот же код, создавая дочерний тег div для каждого числа и отображая число внутри родительского тега div. Переменная results[x] указывает, какое число в списке будет отображаться (results[0] — первое число, results[1] — второе и т. д.). И причина двух закрывающих скобок в конце в том, что одна закрывает цикл for, а вторая закрывает функцию.
Однако теперь есть проблема, он отображает 6 чисел в виде столбца. Сейчас мы не будем много делать с CSS, но это поможет улучшить внешний вид дисплея.
В CSS мы собираемся настроить макет flexbox, который помогает гибко отображать ваш контент. Обычно он идет в строку или столбец (по умолчанию в строку). Мы настроим файл CSS для отображения этого.
.results{
display: flex;
width: 60%;
flex-direction: row;
align-items: center;
justify-content: space- между;
}
Это должно занимать только 60% ширины вашего экрана, но отображать числа в ряд с четным расстоянием между ними. Align-items будет выравнивать элементы по центру по вертикали (по горизонтали, если flex-direction является столбцом), а justify-content выравнивает и размещает содержимое по горизонтали.
На данный момент ваша страница выглядит простой, но она функциональна и может быть прочитана. Это также просто, так как это делается только для одной лотерейной игры. Но он отображает 6 уникальных чисел случайным образом между числами 1 и 54.
Этого мне было мало.
Я хотел настроить его для обработки нескольких лотерейных игр во всех их форматах. Фактически, Техас играет в семь различных лотерейных игр. Так что в следующий раз мы рассмотрим адаптацию этого же кода для работы с любым форматом игры в лото.
