Добро пожаловать в первый пост из этой новой серии, Сможете ли вы найти ошибку? Здесь вам будет предложено найти ошибку во фрагменте кода, не запуская его.

Хорошо, я знаю, что вы думаете: "это такой надуманный вызов; зачем вам отлаживать код, не запуская его?» 🤔

Ну, помимо того, что это забавная задача, чтобы увидеть, обладаете ли вы исключительным зрением для Где Уолдо? ошибок, возможность обнаруживать ошибки без повторного запуска кода может сэкономить вам много времени. .

…eособенно, если ошибка не приводит к явным сообщениям об ошибках. (Если вам когда-либо приходилось часами отлаживать логическую ошибку, вы понимаете, о чем я говорю!)

Правила

  1. Вы не можете запускать код или просматривать какие-либо сообщения об ошибках, выдаваемые кодом. 🙈
  2. Каждый фрагмент кода сопровождается определенным сценарием неожиданного поведения кода. Ваша задача — найти ошибку, которая вызывает такое поведение. 🔎
    Например, в сценарии может быть описано, как пользователь получает неожиданное поведение при вводе «10». Даже если во входных данных не учитывались отрицательные числа, эта ошибка не относится к описанному конкретному сценарию и, следовательно, не является той ошибкой, которую вы ищете.
  3. Если вы хотите бросить себе вызов, постарайтесь не использовать Google и не обращаться к документации! 😱
  4. Код часто будет содержать хитрые конструкции, которые могут ввести вас в заблуждение, заставив вас думать, что определенная часть является виновником ошибок, когда на самом деле это правильное поведение! Если хотите, попробуйте ограничиться одним предположением! 🙂

Быстрый отказ от ответственности

Если вы не можете обнаружить ошибку, это не значит, что вы плохой программист!

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

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

С учетом сказанного, наденьте шапку мышления и попытайтесь обнаружить следующую скрытую ошибку! 🧢

Перевод текста

Это ошибка, с которой я столкнулся несколько лет назад, в начале своего пути изучения 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