«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript


Игра на «Морской Бой» на JavaScript: Простая Игра и Игра для Двоих


Здесь мы продолжим работать с кодом из 1-ой практической задачи: его нужно будет доработать, используя циклы и условия.

Условие задачи:

1) Автоматизировать вопросы пользователю про фильмы при помощи цикла.

2) Сделать так, чтобы пользователь не мог оставить ответ в виде пустой строки, не мог отменить ответ или ввести название фильма длиннее, чем 50 символов. Если это происходит - возвращаем пользователя к вопросам опять.

Дополнительная информация:
- cвойство length позволяет получить число символов в строке;
- при нажатии на кнопку "отмена" метод prompt возвращает null.

3) При помощи условий проверить personalMovieDB.count, и, если значение меньше 10 - вывести сообщение "Просмотрено довольно мало фильмов", если от 10 до 30 - "Вы классический зритель", а если больше - "Вы киноман". А если не подошло ни к одному варианту - "Произошла ошибка".

4) Потренироваться и переписать цикл еще двумя способами.



Решение №1 - Цикл for


const numberOfFilms = +prompt('Сколько фильмов вы уже посмотрели?');

const personalMovieDB = {
    count: numberOfFilms,
    movies: {},
    actors: {},
    genres: [],
    private: false
};

for (let i = 0; i < 2; i++) {
    const a = prompt('Один из последних просмотренных фильмов?'),
          b = prompt('На сколько оцените его?');   
/* Если пользователь:
    - НЕ оставил пустыми поля для ввода И
    - НЕ нажал Отмена И
    - название фильма меньше 50 символов, то... 
*/
    if(a != '' && b != '' && a != null && b != null && a.length < 50) {
        personalMovieDB.movies[a] = b; // ...информация заносится в объект movies, иначе...
        console.log('done');
    }
    else{
        console.log('error');
        i--; // ...декремент, то есть возвращаемся к вопросам.
    }
}

if (personalMovieDB.count < 10) {
    console.log('Просмотрено довольно мало фильмов');
} else if (personalMovieDB.count > 10 && personalMovieDB.count < 30) {
        console.log('Вы классический зритель');
} else if (personalMovieDB.count > 30) {
        console.log('Вы киноман');
} else {
        console.log('Произошла ошибка');
}

console.log(personalMovieDB);

Решение №1 - Перейти в браузер

Здесь для решения 2-ой части задачи внутри цикла составляется условие с использованием оператора неравенства != и логического оператора И && .

Решение 3-ей части задания проще: используются вложенные условия.

Решение №2 - Цикл for


const numberOfFilms = +prompt('Сколько фильмов вы уже посмотрели?');

const personalMovieDB = {
    count: numberOfFilms,
    movies: {},
    actors: {},
    genres: [],
    private: false
};

for (let i = 0; i < 2; i++) {
    const a = prompt('Один из последних просмотренных фильмов?'),
          b = prompt('На сколько оцените его?');   
/* Если пользователь:
    - оставил пустым одно из полей для ввода ИЛИ
    - нажал Отмена ИЛИ
    - название фильма больше 50 символов, то... 
*/      
    if(a == '' || b == '' || a == null || b == null || a.length > 50) {
        console.log('error');
        i--;      // ...декремент и...
        continue; // ...продолжаем цикл, то есть возвращаемся к вопросам, иначе...
    }
    console.log('done');
    personalMovieDB.movies[a] = b; // ...информация заносится в объект movies.
}

if (personalMovieDB.count < 10) {
    console.log('Просмотрено довольно мало фильмов');
} else if (personalMovieDB.count > 10 && personalMovieDB.count < 30) {
        console.log('Вы классический зритель');
} else if (personalMovieDB.count > 30) {
        console.log('Вы киноман');
} else {
        console.log('Произошла ошибка');
}

console.log(personalMovieDB);

Решение №2 - Перейти в браузер

Здесь для решения 2-ой части задачи внутри цикла составляется условие с использованием оператор сравнения == и логического оператора ИЛИ ||.

Тонкости и нюансы

В примерах далее код решения частично удален: используется та его часть, которая необходима для рассмотрения некоторых особенностей.

Итак, в решении задачи не учитывается: что будет, если пользователь при ответе на 1-ый вопрос нажмет кнопку ОК или Отмена (хотя в целом все требования условия задачи выполняются).

1-ый момент

Если мы не будем отвечать на первый вопрос (не будем заполнять поле для ввода): "Сколько фильмов вы уже посмотрели?" и нажмем кнопку ОК, то...


const numberOfFilms = +prompt('Сколько фильмов вы уже посмотрели?');

const personalMovieDB = {
    count: numberOfFilms,
    movies: {},
    actors: {},
    genres: [],
    private: false
}; 

console.log(personalMovieDB.count);

if (personalMovieDB.count < 10) {
    console.log('Просмотрено довольно мало фильмов');
    } else if (personalMovieDB.count > 10 && personalMovieDB.count < 30) {
        console.log('Вы классический зритель');
    } else if (personalMovieDB.count > 30) {
        console.log('Вы киноман');
    } else {
        console.log('Произошла ошибка');
    }

Результат


0
Просмотрено довольно мало фильмов

... в personalMovieDB.count передается ноль, так как знак + перед методом prompt конвертирует пустую строку в ноль.

Соответственно в решении для 3-ей части задания мы увидим "Просмотрено довольно мало фильмов".

2-ой момент

Если убрать знак плюс перед методом prompt и, снова не вводя информацию в поле для ввода, нажать кнопку ОК, то...


const numberOfFilms = prompt('Сколько фильмов вы уже посмотрели?');

const personalMovieDB = {
    count: numberOfFilms,
    movies: {},
    actors: {},
    genres: [],
    private: false
}; 

console.log(personalMovieDB.count);

if (personalMovieDB.count < 10) {
    console.log('Просмотрено довольно мало фильмов');
    } else if (personalMovieDB.count > 10 && personalMovieDB.count < 30) {
        console.log('Вы классический зритель');
    } else if (personalMovieDB.count > 30) {
        console.log('Вы киноман');
    } else {
        console.log('Произошла ошибка');
    }

Результат



Просмотрено довольно мало фильмов

... в personalMovieDB.count передается пустая строка.

И в решении для 3-ей части задания мы снова увидим "Просмотрено довольно мало фильмов", так как в условии происходит конвертация в булев тип данных.

3-ий момент

Если при ответе на 1-ый вопрос будет нажата кнопка Отмена, то...

Результат при нажатии на Отмена


null
Просмотрено довольно мало фильмов

... в personalMovieDB.count передается null.

И в решении для 3-ей части задания мы также увидим "Просмотрено довольно мало фильмов".

Итак, здесь были продемонстрированы особенности динамической типизации языка JavaScript. К этому нужно привыкать и с подобными вещами нужно уметь работать.

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





Отзывы и комментарии:

Комментариев нет...

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?


Рунет - Часть 2
Практика часть 2 – Циклы и Условия
621
Условия if else - Конструкция switch case - Тернарный оператор
230
Циклы while и for - Операторы break и continue
278
Объявление функций – Стрелочные функции ES6
463
Методы и свойства строк и чисел - Метод substr - Индекс строки
145
Практика часть 3 - Используем функции
333
Что такое callback-функция - Аргумент другой функции
525
Свойства и методы объектов - Деструктуризация объектов ES6
850
Методы массивов - Перебор элементов массива - Псевдомассивы
813
Передача данных по ссылке и по значению – Клонирование объекта
197
Метод assign() – Копирование исходных объектов в целевой объект
162
Копирование массивов - Оператор spread
406
Прототипное Программирование - Прототип и Экземпляр Объекта
170
Свойство proto - Методы Object.create и Object.setPrototypeOf
433
Практика часть 4 - Используем функции как методы объекта
9721
Помощь сайту
Yandex-деньги/Ю-Money
410011236419322
Перевод на карту СБ
4276 1300 1671 5819
WebMoney
R711879515665 Z861169301432

Тематические публикации
Популярные заметки
Последние заметки