Вау! Я с трудом могу поверить, что идет четвертая неделя моего курса погружения в код в TIY. Это означает, что у меня осталось всего 8 недель. До сих пор мой опыт был постоянным приливом и отливом. В один момент я получу это, буду следовать, создавать код и решать проблемы. В следующий раз я буду потерян, разочарован, взволнован и столкнусь с кодовым эквивалентом «блока писателя».
Прошлая неделя была для меня особенно сложной, так как мы начали наше знакомство с Javascript. Через пару недель после знакомства с HTML и CSS меня накрыла волна стресса, связанная с появлением javascript. В начале javascript был более абстрактным для понимания, но награды были большими. Javascript — это то, что делает эстетику HTML и CSS (то, что делает веб-страницу красивой) действительно полезной и функциональной (превращает эту страницу в приложение… в основном).
На прошлой неделе я смог сделать шаг назад и получить некоторую перспективу. Мне очень нравится работать с Javascript. Это невероятно полезно, но и разочаровывает. Мне нравится решать проблемы и настраивать логику, но иногда я слишком много обдумываю и делаю свой код слишком сложным. Отчасти это произошло из-за того, что все было таким новым и смешанным в моей памяти. Частично это происходит из-за того, что вы научились продумывать код.
Одна из моих больших побед на этой неделе и во всей моей практике Javascript (которой на данный момент всего две недели) — это фрагмент кода:
var inputInfo = $(‘#todo-input’)
var settings = {
type: ‘GET’,
dataType: ‘json’,
url: ‘https://tiny-za-server.herokuapp.com/collections/joebum'
};
$.ajax(settings).then(function(data, status, xhr) {
data.forEach(function(item, i, arr) {
var url = ‘https://tiny-za-server.herokuapp.com/collections/joebum/' + item._id
var todoList = $(“#todo-list”);
var todoItem = $(‘<li class=”todo-item”>’ + item.todo + ‘<button class=”item-delete-btn” type=”button”>done</button></li>’);
var deleteBtn = todoItem.find(‘.item-delete-btn’);
deleteBtn.on(‘click’, function(e) {
console.log(item._id, url);
var deleteItem = {
type: ‘DELETE’,
url: url
}
$.ajax(deleteItem).then(function() {
todoItem.remove();
})
})
todoList.append(todoItem);
})
})
Почему? По нескольким причинам, но прежде всего потому, что доступ к элементам, добавленным в DOM, осуществляется с помощью AJAX, что довольно сложно. Итак, я решил написать технический пост о том, как я это сделал.
Сообщение в блоге впереди…
