Разделение проблем — управление DOM с помощью JQuery

На этой неделе я работаю над игровым проектом, в котором пользователи просматривают зашифрованные слова каждый раз, когда обновляется страница или нажимается кнопка. Пользователи также могут просматривать подсказки, чтобы угадать слово. Затем пользователи могут ввести свой ответ в форму и отправить эту форму. В случае правильного ответа пользователям присваивается оценка, которая отображается на экране, которая добавляет или вычитает баллы в зависимости от их ответа. Сегодня мы написали 2 функции — RandomName и Shuffle. Внутри этих функций мы по ошибке применили DOM-события. Позже я узнал от профессионального игрока, что лучше всего разделять задачи и писать функции, которые решают проблемы с размером укуса. Функция shuffle получает на вход строку и должна преобразовать эту строку в массив, в котором каждый символ разбит на отдельные буквы. Теперь это массив, буквы должны быть перемешаны и снова соединены вместе, чтобы сформировать новое зашифрованное слово.

Первый шаг: подайте вашей функции некоторые данные -

const dictionary = {
 “Mark Hamil”: “Luke Skywalker”,
 “Harrison Ford”: “Han Solo”,
 “Carrie Fisher”: “Princess Leia”,
 “Anthony Daniels”: “C-3PO”,
 “Daisy Ridley”: “Rey”,
 “Liam Neeson”: “Qui-Gon Jinn”,
 “Natalie Portman”: “Padme Amidala”,
 “Alec Guinness”: “Obi-Wan Kenobi”,
 “Felicity Jones”: “Jyn Erso”,
}

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

const shuffle = function( randomName ) {
 let result = randomName.split(‘’)
for( let i = 0; i < result.length; i++ ) {
 const randomIndex = Math.floor( Math.random() * result.length )
 const item = result[ i ]
result[ i ] = result[ randomIndex ];
 result[ randomIndex ] = item
 }
 
 return result.join(‘’)
}

Что здесь происходит? Ладно, разобьем. Функциональное выражение SHUFFLE принимает случайное имя набора данных. Затем этот набор данных разбивается на массив с помощью встроенного метода .split. Когда вы используете эту встроенную функцию для javascript, вам нужно убедиться, что она содержит пустую строку, чтобы строка была разделена на отдельные буквы. .split также может принимать параметр, по которому вы хотите разделить массив. Затем мы перебираем массив. Мы устанавливаем переменную randomIndex, которая принимает длину массива и умножает ее, чтобы получить случайное число на основе длины массива. Затем мы присваиваем значение массива по этому индексу в переменной с именем item. Затем мы берем этот результат по этому индексу, затем присваиваем его случайному номеру индекса и, наконец, присваиваем его элементу. Затем мы объединяем новый массив результатов вместе, чтобы сформировать зашифрованное слово. Фух.

//DOM EVENTS
$(document).ready( function() {
 $(‘#random-word-1’).text( shuffle( chooseRandomActor() ) )
$( ‘#rescramble’ ).click( function( event ) {
 $(‘#random-word-1’).text( shuffle( chooseRandomActor() ) ) 
 })
})

Теперь пришло время манипулировать DOM! Сначала нам нужно убедиться, что наши события jQuery срабатывают, когда DOM готов. Это делается с помощью этой строки кода:

$(document).ready( function() {})

Затем выберите элемент html, который должен отображать наше перемешанное случайное слово. Внутри этого обработчика событий jQuery нам также нужно вызвать функцию перемешивания слова. Все это прекрасно обрабатывается этой строкой кода:

$(‘#random-word-1’).text( shuffle( chooseRandomActor() ) )

Наконец, нам нужно запустить это событие снова, как только пользователь нажмет кнопку скремблирования:

$( ‘#rescramble’ ).click( function( event ) {
 $(‘#random-word-1’).text( shuffle( chooseRandomActor() ) ) 
 })