Денис Инешин

Например вот так: https://jsfiddle.net/IonDen/fkyvx596/

function convert(obj) {
    var z = [];

    for (var prop in obj) {
        z.push(obj[prop]);
    }

    return z;
}

var foo = {
    40: {
        name: "Vasia"
    },
    44: {
        name: "Petia"
    }
};

var bar = convert(foo);

console.log(bar); // [Object {name="Vasia"}, Object {name="Petia"}]
console.log(bar[0].name); // Vasia
console.log(bar[1].name); // Petia

Тут не обойтись без JS. В этом вам поможет метод canPlayType

Так же есть еще один метод, который проверит можно ли воспроизвести: canplaythrough

Суть работы с аяксом в том, что вы ничего тут не возвращаете. Это происходит потому, что ajax-запрос - асинхронный, а возврат результата выполнения функций возможен только для синхронного кода.

Можно:

function calc (x, y) {
    return x + y;
}

Нельзя:

function ajax () {
    return "ajax result";
}

Чтобы работать с асинхронным кодом, вы должны разбить свой код на шаги, примерно так:

// шаг 1 - запрашиваем данные
function step1 () {
      $.ajax({
            success: function (data) {
                  step2(data); // вызываем шаг 2
            }
      });
}

// шаг 2, работаем с полученными данными
function step2 (data) {
     // data доступен здесь
}

Для облегчения работы с асинхронным кодом, существует разные техники, например промисы

Для облегчения работы именно с Ajax, существуют хорошие библиотеки вроде Fetch

Не нужно начинать с Флэнагена. Он очень сложен для восприятия, это скорее книга чтобы углубиться, когда вы уже и так знаете прилично.

На данный момент гоняйте онлайн курсы и пишите свои мини проекты.

Как правильно учить Javascript?
Какие есть практические курсы\уроки по html5 + css3 + javascript?

Есть прекрасная библиотека, которая умеет делать подобные преобразования.
momentjs.com

JSON - это не объект, это формат записи строки, который может быть легко и просто трансформирован в объект. По сути, ваш первый пример лучше всего записать действительно как строку, так: '{"a":"5","b":"6"}'

Если же ваш вопрос о том, в чем разница в записи названий ключей в кавычках и без кавычек, то это очень просто. JS изобилует спец. символами, зарезервированными словами и прочими ограничениями. По этому, записывая имя ключа, нужно всегда держать это в уме:

// не валидно
var x = {
	Hey man !: 10
};

// валидно
var x = {
	"Hey man !": 10
};

В старых браузерах были проблемы при использовании зарезервированных слов вроде switch или class в качестве ключей и т.п.

Заключение имени ключа в кавычки - гарантированный способ получить корректный результат (почти, конечно нужно следить чтобы внутренние кавычки были закодированы).

Ну как то так: codepen.io/anon/pen/vgyRxR

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

Но если вы хотите рендерить кусочки, то тут не обойтись без какого-то фреймворка вроде Ember (он как раз работает с Handlebars) который умеет это делать.

https://jsfiddle.net/IonDen/phufb8yc/6/

1. У вас текстура корявая, нужно сделать плавно переходящую
2. Нельзя делать позиционирование фона в процентах здесь. Это работает по другому. 50% - значит центр, 100% значит правый край, а не то что вы могли подумать.

$("input").each(function(i) {
    var $inp = $(this);
    var name = $inp.prop("name");
    name = name + i;
    $inp.prop("name", name);
});