Разработка самого первого приложения может оказаться непростой задачей, независимо от выбранного вами языка программирования. Однако при правильном руководстве, ресурсах и мотивации путешествие может стать захватывающим и полезным опытом. В этой статье мы научимся создавать простое приложение JavaScript, которое генерирует случайное число от 1 до 100, просит пользователя выбрать правильный ответ из набора четырех возможных ответов, а затем определяет, является ли ответ пользователя правильным или неправильным. . Надеюсь, к концу этой статьи у нас будет базовое понимание того, как создать приложение на JavaScript и как использовать некоторые из его встроенных функций для создания интерактивного пользовательского интерфейса.
Давайте начнем
Для генерации случайного натурального числа воспользуемся Встроенными функциями Javascript. Math.random генерирует случайное число от 0 до 1. Мы умножаем это значение на 100, чтобы сгенерировать случайное число от 0 до 100, а затем используем Math.floor для округления числа до ближайшего целого числа. Наконец, мы добавляем 1, чтобы гарантировать, что сгенерированное число находится в диапазоне от 1 до 100.
const randomNumber = Math.floor(Math.random() * 100) + 1;
Далее мы создаем массив возможных ответов, содержащий четыре строки, каждая из которых описывает возможный ответ на вопрос:
const answers = [ "The number is even.", "The number is odd.", "The number is a multiple of 5.", "The number is a prime number." ];
Теперь, когда у нас есть случайное число и возможные ответы, нам нужно определить правильные ответы на основе свойств числа. Начнем с создания пустого массива для хранения правильных ответов.
let correctAnswers = [];
Если модуль числа при делении на 2 равен нулю, то число четное, запихиваем ответ «Число четное» в массив correctAnswers. Но если случайное число не четное, очевидно, оно должно быть нечетным, поэтому вместо этого мы помещаем ответ «Число нечетное» в массив.
if (randomNumber % 2 === 0) {
correctAnswers.push(answers[0]);
} else {
correctAnswers.push(answers[1]);
}
Если случайное число кратно 5, мы помещаем ответ «Число кратно 5» в массив correctAnswers.
if (randomNumber % 5 === 0) {
correctAnswers.push(answers[2]);
}
Наконец, мы определяем, является ли случайное число простым числом или нет.
- Во-первых, давайте установим для переменной «isPrime» значение true.
- Если сгенерированное случайное число равно 1, установите для isPrime значение false, поскольку 1 не является простым числом.
- Если случайное число больше 1, создайте цикл, который начинается с 2 и идет вверх до числа перед случайным числом.
- В каждой итерации цикла проверяйте, делится ли случайное число на текущее число (i). Если это так, то для isPrime устанавливается значение false, и цикл останавливается с помощью оператора break.
- Если цикл завершается без нахождения числа, которое делит случайное число, то это означает, что randomNumber является простым числом, а «isPrime» остается истинным.
- Если «isPrime» истинно после цикла, нажмите строку «Число является простым числом». в массив correctAnswers.
let isPrime = true;
if (randomNumber === 1) {
isPrime = false;
} else {
for (let i = 2; i < randomNumber; i++) {
if (randomNumber % i === 0) {
isPrime = false;
break;
}
}
}
if (isPrime) {
correctAnswers.push(answers[3]);
}
Теперь, когда у нас есть случайное число и правильные ответы, мы можем отобразить вопрос опроса и возможные ответы пользователю, используя метод console.log():
console.log("What is true about the number " + randomNumber + "?");
console.log("A) " + answers[0]);
console.log("B) " + answers[1]);
console.log("C) " + answers[2]);
console.log("D) " + answers[3]);
Затем мы создаем интерфейс для чтения ввода и вывода с помощью модуля readline, который является встроенным модулем в Node.js. Мы используем метод createInterface() для создания нового интерфейса readline, передавая в качестве аргументов стандартные потоки ввода и вывода. Это позволяет нам читать ввод от пользователя и записывать вывод в консоль.
const readline = require("readline").createInterface({
input: process.stdin,
output: process.stdout
});
Затем мы создаем приглашение, используя метод question() на интерфейсе readline. Мы передаем строку, представляющую подсказку, и функцию обратного вызова, которая будет вызываться с ответом при нажатии кнопки Enter.
Внутри функции обратного вызова мы сначала инициализируем переменную selectedAnswer пустой строкой. Затем мы проверяем, соответствует ли введенный ответ любому из возможных вариантов ответа (A, B, C или D), используя метод toUpperCase() для преобразования ответа пользователя в верхний регистр и сравнения его с каждым возможным ответом. Если заданный ответ совпадает с одним из возможных ответов, мы устанавливаем в переменную selectedAnswer соответствующий ответ из массива answers. Если данный ответ не соответствует ни одному из возможных ответов, мы печатаем сообщение об ошибке и закрываем интерфейс readline, вызывая на нем метод close(). Мы также возвращаемся из функции, чтобы предотвратить дальнейшее выполнение кода.
readline.question("Enter your answer (A, B, C, or D): ", answer => {
let selectedAnswer = "";
if (answer.toUpperCase() === "A") {
selectedAnswer = answers[0];
} else if (answer.toUpperCase() === "B") {
selectedAnswer = answers[1];
} else if (answer.toUpperCase() === "C") {
selectedAnswer = answers[2];
} else if (answer.toUpperCase() === "D") {
selectedAnswer = answers[3];
} else {
console.log("Invalid answer. Choose From Above Answers");
readline.close();
return;
}
Получив выбранный пользователем ответ, мы проверяем, соответствует ли он какому-либо из правильных ответов, используя метод includes() для массива correctAnswers. Если выбранный пользователем ответ находится в массиве correctAnswers, мы печатаем сообщение, указывающее, что ответ правильный, вместе с правильным(и) ответом(ами) на вопрос опроса. Если выбранный пользователем ответ отсутствует в массиве correctAnswers, мы печатаем сообщение о том, что ответ неверен, вместе с правильным(и) ответом(ами) на вопрос опроса.
if (correctAnswers.includes(selectedAnswer)) {
if (correctAnswers.length > 1) {
console.log("Correct! The correct answers are:");
console.log(correctAnswers.join("\n"));
} else {
console.log("Correct! The correct answer is:");
console.log(correctAnswers[0]);
}
} else {
if (correctAnswers.length > 1) {
console.log("InCorrect! The correct answers are:");
console.log(correctAnswers.join("\n"));
} else {
console.log("InCorrect! The correct answer is:");
console.log(correctAnswers[0]);
}
}
Наконец, мы закрываем интерфейс readline, вызывая на нем метод close(), что освобождает ресурсы, используемые интерфейсом.
readline.close();
На данный момент наше полнофункциональное приложение должно выглядеть так
// Generate a random number between 1 and 100
const randomNumber = Math.floor(Math.random() * 100) + 1;
// Create an array of possible answers
const answers = [
"The number is even.",
"The number is odd.",
"The number is a multiple of 5.",
"The number is a prime number."
];
// Determine the correct answers based on the random number
let correctAnswers = [];
if (randomNumber % 2 === 0) {
correctAnswers.push(answers[0]);
} else {
correctAnswers.push(answers[1]);
}
if (randomNumber % 5 === 0) {
correctAnswers.push(answers[2]);
}
let isPrime = true;
if (randomNumber === 1) {
isPrime = false;
} else {
for (let i = 2; i < randomNumber; i++) {
if (randomNumber % i === 0) {
isPrime = false;
break;
}
}
}
if (isPrime) {
correctAnswers.push(answers[3]);
}
// Display the poll question and possible answers
console.log("What is true about the number " + randomNumber + "?");
console.log("A) " + answers[0]);
console.log("B) " + answers[1]);
console.log("C) " + answers[2]);
console.log("D) " + answers[3]);
// Allow the user to select an answer
const readline = require("readline").createInterface({
input: process.stdin,
output: process.stdout
});
readline.question("Enter your answer (A, B, C, or D): ", answer => {
let selectedAnswer = "";
if (answer.toUpperCase() === "A") {
selectedAnswer = answers[0];
} else if (answer.toUpperCase() === "B") {
selectedAnswer = answers[1];
} else if (answer.toUpperCase() === "C") {
selectedAnswer = answers[2];
} else if (answer.toUpperCase() === "D") {
selectedAnswer = answers[3];
} else {
console.log("Invalid answer. Choose From Above Answers");
readline.close();
return;
}
// Display the Answers
if (correctAnswers.includes(selectedAnswer)) {
if (correctAnswers.length > 1) {
console.log("Correct! The correct answers are:");
console.log(correctAnswers.join("\n"));
} else {
console.log("Correct! The correct answer is:");
console.log(correctAnswers[0]);
}
} else {
if (correctAnswers.length > 1) {
console.log("InCorrect! The correct answers are:");
console.log(correctAnswers.join("\n"));
} else {
console.log("InCorrect! The correct answer is:");
console.log(correctAnswers[0]);
}
}
readline.close();
});
Рефакторинг
Рефакторинг — важнейший и ключевой элемент любого процесса разработки. Это важный процесс в разработке программного обеспечения для поддержания работоспособности кодовой базы и сокращения технического долга. Хотя наше приложение в данный момент работает правильно, мы должны провести его рефакторинг, чтобы улучшить его читабельность, удобство сопровождения и производительность, но всегда помните, что при рефакторинге делайте это без изменения его функциональности.
Давайте рефакторим метод, чтобы проверить, является ли randomNumber простым числом или нет, используя Рекурсию.
let isPrime = (num, div = 2) => {
if (num === 1) {
return false;
}
if (num === div) {
return true;
}
if (num % div === 0) {
return false;
}
return isPrime(num, div + 1);
};
if (isPrime(randomNumber)) {
correctAnswers.push(answers[3]);
}
Эта реализация isPrime принимает два аргумента: num — число, которое нужно проверить на простоту, и div — делитель, который мы сейчас проверяем. Мы устанавливаем значение по умолчанию 2 для div, поскольку мы знаем, что каждое число делится на 1, поэтому мы можем начать проверку с 2.
Функция сначала проверяет, равно ли введенное число 1, и в этом случае она немедленно возвращает false (поскольку 1 не считается простым числом). Если входное число равно текущему делителю div, это означает, что мы проверили все возможные делители до квадратного корня из num, и ни один из них не делит num без остатка, поэтому мы можем вернуть true. Если num делится на div, мы знаем, что оно не простое, поэтому возвращаем false. В противном случае мы увеличиваем div на 1 и рекурсивно вызываем isPrime с обновленным div.
После вызова функции isPrime, если число простое, добавляем соответствующий ответ в массив correctAnswers.
Теперь давайте рефакторим выбранные ответы пользователя
readline.question("Enter your answer (A, B, C, or D): ", answer => {
let selectedAnswer = "";
const answerIndex = {A: 0, B: 1, C: 2, D: 3}[answer.toUpperCase()];
if (answerIndex === undefined) {
console.log("Invalid answer. Choose From Above Answers");
readline.close();
return;
} else {
selectedAnswer = answers[answerIndex];
}
Вместо нескольких операторов If объект answerIndex используется для сопоставления каждой буквы выбора ответа с соответствующим индексом в массиве answers. Индекс получается с использованием записи скобок на объекте answerIndex с вводом пользователя в качестве ключа.
Если значение answerIndex не определено, это означает, что пользовательский ввод не является допустимым выбором ответа, и программа напечатает сообщение об ошибке и завершит работу.
В противном случае, если получен допустимый индекс, переменной selectedAnswer будет присвоено соответствующее значение из массива answers.
Теперь давайте реорганизуем нашу функциональность печати сообщений.
Давайте назовем константную переменную isCorrect и присвоим ей логическое значение того, включено ли selectedAnswer в массив correctAnswers. includes() — это метод массива в JavaScript, который возвращает true, если элемент, переданный в качестве аргумента, найден в массиве, и false в противном случае.
const isCorrect = correctAnswers.includes(selectedAnswer);
if (correctAnswers.length > 1) {
console.log(
`${isCorrect ? 'Correct' : 'Incorrect'}! The correct answers are:`
);
console.log(correctAnswers.join("\n"));
} else {
console.log(
`${isCorrect ? 'Correct' : 'Incorrect'}! The correct answer is: ${correctAnswers[0]}`
);
}
readline.close();
});
Теперь давайте проверим, содержит ли массив correctAnswers более одного элемента. Если это так, то первый оператор console.log() выведет 'Верно!' если isCorrect верно и "Неверно!" в противном случае следует сообщение «Правильные ответы:» на новой строке. Второй оператор console.log() выводит каждый элемент correctAnswers на отдельной строке, используя метод join() для разделения элементов символом новой строки (\n).
Если correctAnswers имеет только один элемент, первый оператор console.log() выведет 'Верно!' если isCorrect верно и "Неверно!" в противном случае следует сообщение «Правильный ответ:» и единственный элемент correctAnswers.
На данный момент наш рефакторинговый код должен выглядеть так
// Generate a random number between 1 and 100
const randomNumber = Math.floor(Math.random() * 100) + 1;
// Create an array of possible answers
const answers = [
"The number is even.",
"The number is odd.",
"The number is a multiple of 5.",
"The number is a prime number."
];
// Determine the correct answers based on the random number
let correctAnswers = [];
if (randomNumber % 2 === 0) {
correctAnswers.push(answers[0]);
} else {
correctAnswers.push(answers[1]);
}
if (randomNumber % 5 === 0) {
correctAnswers.push(answers[2]);
}
let isPrime = (num, div = 2) => {
if (num === 1) {
return false;
}
if (num === div) {
return true;
}
if (num % div === 0) {
return false;
}
return isPrime(num, div + 1);
};
if (isPrime(randomNumber)) {
correctAnswers.push(answers[3]);
}
// Display the poll question and possible answers
console.log("What is true about the number " + randomNumber + "?");
console.log("A) " + answers[0]);
console.log("B) " + answers[1]);
console.log("C) " + answers[2]);
console.log("D) " + answers[3]);
// Allow the user to select an answer
const readline = require("readline").createInterface({
input: process.stdin,
output: process.stdout
});
readline.question("Enter your answer (A, B, C, or D): ", answer => {
let selectedAnswer = "";
const answerIndex = {A: 0, B: 1, C: 2, D: 3}[answer.toUpperCase()];
if (answerIndex === undefined) {
console.log("Invalid answer. Choose From Above Answers");
readline.close();
return;
} else {
selectedAnswer = answers[answerIndex];
}
//Display the answer
const isCorrect = correctAnswers.includes(selectedAnswer);
if (correctAnswers.length > 1) {
console.log(
`${isCorrect ? 'Correct' : 'Incorrect'}! The correct answers are:`
);
console.log(correctAnswers.join("\n"));
} else {
console.log(
`${isCorrect ? 'Correct' : 'Incorrect'}! The correct answer is: ${correctAnswers[0]}`
);
}
//Close the prompt
readline.close();
});
В заключение, создание простого приложения на любом языке программирования поначалу может показаться сложной задачей, но при правильном мышлении и ресурсах это может стать захватывающим и полезным опытом. В этой статье мы написали простое приложение на JavaScript, которое генерирует случайное число от 1 до 100 и предлагает пользователю выбрать правильный ответ из набора четырех возможных ответов. Мы использовали функции Math.random() и Math.floor() для генерации случайного числа и массива возможных ответов для создания вопроса. Мы также продемонстрировали, как определить правильные ответы на основе свойств случайного числа и как создать интерфейс для чтения ввода и вывода с помощью модуля readline. Я надеюсь, что эта статья поможет новичкам обрести уверенность в написании своего первого приложения на JavaScript и продолжить развивать свои навыки в будущем.
