Блог

Главная - Вопросы по программированию - Начальный уровень JavaScript — Нужна помощь в понимании Math.random и «кавычек.длина»

Начальный уровень JavaScript — Нужна помощь в понимании Math.random и «кавычек.длина»

#javascript #arrays

#javascript #массивы

Вопрос:

и мне нужна помощь в понимании некоторых частей этого примера, в котором я выполняю Sams, изучающий HTML, CSS и JavaScript.

Несколько вещей, которые они не объяснили на уроке, — это вот эта строка «i = Math.floor(Math.random() * кавычки.длина);»

Как кавычки.длина и Math.random работают? Также мне трудно понять этот блок кода..

 "//Write out the quote as HTML
        document.write("<p style='background-color: #ffb6c1'>"");
        document.write(quotes[i]   """);
        document.write("<em>-"   sources[i]   "</em>");
        document.write("</p>");"

Любая помощь будет оценена.

 <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Quotable Quotes</title>

    <script>
      <!-- Hide the script from old browsers
      function getQuote() {
        //Create the Arrays
        var quotes = new Array(4);
        var sources = new Array(4);

        // Initialize the arrays with quotes
        quotes[0] = "When I was a boy of 14, my father was so "  
        "ignorant...but when I got to be 21 I was astonished"  
        "at how much he had learned in 7 years.";
        sources[0] = "Mark Twain";

        quotes[1] = "Everybody is ignorant. Only on different "  
        "subjects.";
        sources [1] = "Will Rogers";

        quotes[2] = "They say such nice things about people at "  
        "their funerals that it makes me sad that I'm going to "  
        "miss mine by just a few days.";
        sources[2] = "Garrison Keillor";

        quotes[3] = "What's another word for thesaurus?";
        sources[3] = "Steven Wright";

        //Get a random index into the arrays
        i = Math.floor(Math.random() * quotes.length);

        //Write out the quote as HTML
        document.write("<p style='background-color: #ffb6c1'>"");
        document.write(quotes[i]   """);
        document.write("<em>-"   sources[i]   "</em>");
        document.write("</p>");
      }
      // Stop hiding the script -->
      </script>
      <meta name="viewport"
          content="width=device-width, initial-scale=1">
</head>
    <body>
      <h1>Quotable Quotes</h1>
      <p>Followinhg is a randon quotable quote. To see a new quote just reload this page</p>

      <script>
        <!-- Hide the script from old browsers
        getQuote();
        // Stop hiding the script -->
      </script>
    </body>
</html>

Ответ №1:

Math.random() выдает случайное число от 0 до 1. И кавычки.длина вернет количество элементов в массиве кавычек, которое в вашем случае равно 4.

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

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

Если вы считаете, что максимальная длина массива кавычек может быть умножена на 4 (возьмите наибольшее случайное число, которое может сгенерировать Math.random()) 0,9, что будет меньше 4 и с плавающей точкой, поэтому Math.floor позаботится об этом и округлит число в меньшую сторону до ближайшего целого числа, сделав его равным 3, что является последней цитатой. И таким образом вы получаете случайные кавычки.

i = Math.floor(Math.random() * quotes.length);

Теперь перейдем к этому:

Это просто запись html в DOM (Document Object Model). DOM определяет логическую структуру документов и способ доступа к ним и управления ими.

Итак, по сути, вы просто записываете HTML, инкапсулированный в кавычки, в документ.

    document.write("<p style='background-color: #ffb6c1'>");
   document.write(quotes[i]   """);
   document.write("<em>-"   sources[i]   "</em>");
   document.write("</p>");"

Комментарии:

1. Спасибо, потрясающее объяснение. Чтобы продолжить пример, почему я получаю «неопределенное» значение всякий раз, когда я использую вместо этого функцию math.ceil? Это потому, что сейчас округляется число до четырех, которого в данном случае не существует?

2. Да, @tony_ysl абсолютно. Допустим, если вы получили 0.9 в качестве случайного числа и умножили его на 4 (длина вашего массива кавычек ), вы получите 3.6, а после использования ceil оно примет значение 4, которого не существует в этом массиве. Пожалуйста, подумайте о том, чтобы отметить его как правильный ответ, если вы нашли его полезным 🙂

3. Привет @Tushar Я пометил ваш ответ полезным, но я получаю это «Спасибо за отзыв! Голоса, поданные теми, у кого репутация менее 15, записываются, но не изменяют оценку публикации, отображаемую публично.» каждый раз, когда я нажимаю стрелку вверх …. ваш ответ был отличным, спасибо 🙂