Кодирование на JavaScript — это один из языков, где вы постоянно ходите туда-сюда, чтобы проверить, не происходит ли что-нибудь. Я работал над несколькими проектами, используя базовые функции и циклы JavaScript. Во всех своих начинаниях единственное, что я убираю из всего, — это использование точек с запятой и вставка console.log практически везде. Отладка может превратиться в сущий ад, и если вы действительно не знаете точно, что делаете (обычно я), вы обречены на провал. В качестве альтернативы, если вы заблудились, лучше всего проверить свой код, подключить несколько console.logs и посмотреть, что получится. Помимо знания того, что я знаю до сих пор, это единственный способ проверить, знаю ли я, что делаю.
Вы можете честно начать с любого проекта и просто методом проб и ошибок понять, что происходит. Большую часть времени я могу углубиться и проверить свой синтаксис, который обычно связан с неправильным использованием переменной, независимо от того, находится ли она не в том месте или я забыл сослаться на элемент в моем HTML. Кроме того, вы можете проверить состояние своего кода, вставив его в functions.
Один из проектов, над которым я работал, включал в себя создание нескольких функций, которые позволяли бы мне выбирать начинку для пиццы, корочку и, наконец, все собирать. Я имел дело с объектами JavaScript, которые имеют дело со свойствами и методами. Я могу просто создать свою переменную для пиццы и создать свои объекты (тонкое тесто, пепперони, 1 стакан муки и средний размер).
var pizza = {
crustType: “thin crust”,
toppingType: “pepperoni”,
sizeType: “medium”,
flourAmt: “1 cup of flour”,
Имея мои объекты по умолчанию, мне нужно создать некоторые функции, чтобы предоставить альтернативные варианты для наших пользователей. Отсюда я действительно хочу начать тестирование своих функций, чтобы убедиться, что они работают. Моя первая функция makePizza имеет переменную pizzaText, целью которой является отображение нашей полностью построенной пиццы. Мы определяем нашу переменную как строку (манипулятивный текст), которая включает в себя наши объекты. Мы можем проверять консоль на протяжении всего процесса, чтобы убедиться, что наш код работает.
makePizza: function() {
var pizzaText = “We pull out of the oven a “+pizza.sizeType+” “+pizza.toppingType+” pizza with “+pizza.crustType+”. Please enjoy.”;
console.log(pizzaText);
document.getElementById(“feedback”).innerHTML = pizzaText;
}, //end of the method
Чтобы вставить нашу строку в нашу веб-страницу, нам нужно будет использовать строку кода для ссылки на определенный идентификатор в нашем HTML с именем “feedback”, который был связан с тегом div. Если мы быстро взглянем на наш HTML, мы увидим, что наш сайт состоит в основном из заголовков, кнопок и разделов (div).
JavaScript
document.getElementById(“feedback”).innerHTML = pizzaText;
HTML
<div id=”feedback”>feedback</div>
Мы также сделали функцию для создания списка покупок, который подскажет нам, какие ингредиенты нам нужны для приготовления этой пиццы. С помощью этой функции она зависит от того, какие объекты выбраны, поэтому, если выбрана толстая корочка, она изменит ингредиенты, чтобы вместо этого отображались 2 чашки муки. После этого мы добавим нашу строку кода для ссылки на наш идентификатор обратной связи, и мы сможем отображать наши ингредиенты, когда нажимаем кнопку «Список покупок».
shopList: function() {
if (pizza.crustType == “thick crust”) {
pizza.flourAmt = “ 2 cups of flour”;
}
var shopText = “To bake this pizza we will need “+pizza.flourAmt+” and 1 pound of “+pizza.toppingType+”.”;
console.log(shopText);
document.getElementById(“feedback”).innerHTML = shopText;
}//end of method
Если вы просматриваете веб-сайт, вам может быть интересно: «А как насчет вариантов размера «Ананас» и большого размера?» Хорошо, если мы еще раз взглянем на наш HTML, вы увидите синтаксис, который у нас есть, и onclick. Что это делает с функциями, так это изменяет значение объекта value на то, что мы установили. Итак, в разделе «Параметры начинки» у нас есть кнопка «Ананас», которая при нажатии меняет значение pizza.toppingType на «ананас». То же самое касается нашего pizza.sizeType. Эти кнопки onclick могли бы быть легко реализованы в нашем JavaScript, но я хочу показать несколько различных методов создания этих функций.
<h2>Topping Options</h2> <button onclick=”pizza.toppingType=’pepperoni’”>Pepperoni</button> <button onclick=”pizza.toppingType=’pineapple’”>Pineapple</button>
После небольшого тестирования я смог заставить свои функции работать, и я получил свои начинки и размеры для создания своей пиццы. На протяжении всего проекта я подключал console.log к своим функциям, переменным и объектам, чтобы убедиться, что все работает правильно. Я смог легко найти ошибки и даже разочаровался, пытаясь понять, почему что-то не работает (все сводилось к одной точке с запятой). В целом, было полезно часто тестировать мой код.
Мануэль Эспиноза — студент программы «Цифровые медиа» в Университете Юта-Вэлли, Орем, Юта, изучает разработку веб-сайтов и приложений. Следующая статья относится к (Pizza Emporium) в (курсе DGM 2760) и представляет полученные навыки.
