Добро пожаловать в первый пост из этой новой серии, Сможете ли вы найти ошибку? Здесь вам будет предложено найти ошибку во фрагменте кода, не запуская его.
Хорошо, я знаю, что вы думаете: "это такой надуманный вызов; зачем вам отлаживать код, не запуская его?» 🤔
Ну, помимо того, что это забавная задача, чтобы увидеть, обладаете ли вы исключительным зрением для Где Уолдо? ошибок, возможность обнаруживать ошибки без повторного запуска кода может сэкономить вам много времени. .
…eособенно, если ошибка не приводит к явным сообщениям об ошибках. (Если вам когда-либо приходилось часами отлаживать логическую ошибку, вы понимаете, о чем я говорю!)
Правила
- Вы не можете запускать код или просматривать какие-либо сообщения об ошибках, выдаваемые кодом. 🙈
- Каждый фрагмент кода сопровождается определенным сценарием неожиданного поведения кода. Ваша задача — найти ошибку, которая вызывает такое поведение. 🔎
Например, в сценарии может быть описано, как пользователь получает неожиданное поведение при вводе «10». Даже если во входных данных не учитывались отрицательные числа, эта ошибка не относится к описанному конкретному сценарию и, следовательно, не является той ошибкой, которую вы ищете. - Если вы хотите бросить себе вызов, постарайтесь не использовать Google и не обращаться к документации! 😱
- Код часто будет содержать хитрые конструкции, которые могут ввести вас в заблуждение, заставив вас думать, что определенная часть является виновником ошибок, когда на самом деле это правильное поведение! Если хотите, попробуйте ограничиться одним предположением! 🙂
Быстрый отказ от ответственности
Если вы не можете обнаружить ошибку, это не значит, что вы плохой программист!
Способность выявлять ошибки приходит с опытом: по мере того, как вы работаете с большим количеством кода, вы будете сталкиваться со все большим количеством ошибок, включая самые малоизвестные, и знакомиться с ними.
Эта серия сообщений в блоге в первую очередь является учебным ресурсом: ресурсом для вас, чтобы узнать о некоторых нюансах и неочевидных поведении распространенных языков программирования.
С учетом сказанного, наденьте шапку мышления и попытайтесь обнаружить следующую скрытую ошибку! 🧢
Перевод текста
Это ошибка, с которой я столкнулся несколько лет назад, в начале своего пути изучения JavaScript. Это автономный файл HTML, содержащий немного HTML и немного JavaScript, который пытается перевести некоторый текст:
<!DOCTYPE html>
<html>
<body>
<div id='text'>Hello, world!</div>
<select name="languages">
<option value="english">English</option>
<option value="french">French</option>
<option value="spanish">Spanish</option>
<option value="python">Python</option>
</select>
<button onclick='translate()'>Translate Text</button>
<script>
function translate() {
const selectedOption = document.querySelector('select[name="languages"]').value
text.innerText = {
english: 'Hello, world!',
french: 'Bonjour, monde!',
spanish: '¡Hola, mundo!',
python: 'print("Hello, world!")'
}[selectedOption]
}
</script>
</body>
</html>
Этот код отображает некоторый текст в элементе div
. Под ним есть раскрывающийся список, который позволяет вам выбрать язык из четырех языков: английский, французский, испанский и Python.
Да, Python — это язык; Я не указал, что они должны бытьразговорнымиязыками 😛
Под раскрывающимся списком есть кнопка Перевести текст, при нажатии на которую вызывается функция translate()
, определенная в строке 14. Функция translate()
заменяет текст в div
переводом «Hello, world!» на выбранном языке из раскрывающегося списка.
Однако если вы попытаетесь запустить этот код в браузере и выбрать язык из раскрывающегося списка (кроме английского), нажатие кнопки Перевести текст ничего не даст, независимо от того, сколько раз вы щелкните по нему.
В этом коде есть ошибка. Как вы думаете, где это может быть? 🧐
Потратьте минуту или две, чтобы попытаться выяснить ошибку без каких-либо подсказок :) Если вы застряли, вы можете найти подсказки и решение в полной записи блога: https://dialect.so/blog/ можешь-ты-найди-жука-1