final move to png

Author: iliakan

1-js/1-getting-started/1-intro/article.md

@@ -64,7 +64,7 @@ JavaScript -- быстрый и мощный язык, но браузер на
 
 **Большинство возможностей JavaScript в браузере ограничено текущим окном и страницей.**
 
-<img src="limitations.svg" width="530" height="400">
+<img src="limitations.png" width="530" height="400">
 
 <ul>
 <li>JavaScript не может читать/записывать произвольные файлы на жесткий диск, копировать их или вызывать программы. Он не имеет прямого доступа к операционной системе.

1-js/2-first-steps/5-variables/article.md

@@ -52,7 +52,7 @@ var user = 'John', age = 25, message = 'Hello';
 
 Например, переменная `message` -- это коробка, в которой хранится значение `"Hello!"`:
 
-<img src="variable.svg"> 
+<img src="variable.png"> 
 
 В коробку можно положить любое значение, а позже - поменять его. Значение в переменной можно изменять сколько угодно раз:
 
@@ -69,7 +69,7 @@ alert( message );
 
 При изменении значения старое содержимое переменной удаляется.
 
-<img src="variable-change.svg">
+<img src="variable-change.png">
 
 Можно объявить две переменные и копировать данные из одной в другую:
 

1-js/3-writing-js/1-debugging-chrome/statusbarButtonGlyphs.png renamed to 1-js/3-writing-js/1-debugging-chrome/statusbarButtonGlyphs.svg

@@ -7,7 +7,7 @@
 
 Шпаргалка с правилами синтаксиса (детально их варианты разобраны далее):
 
-<img src="code-style.svg">
+<img src="code-style.png">
 
 <!--
 ```js
@@ -57,7 +57,7 @@ if (n < 0) {
 ```
 -->
 
-<img src="figure-bracket-style.svg">
+<img src="figure-bracket-style.png">
 
 Если у вас уже есть опыт в разработке, и вы привыкли делать скобку на отдельной строке -- это тоже вариант. В конце концов, решать вам. Но в большинстве JavaScript-фреймворков стиль именно такой.
 

1-js/3-writing-js/2-coding-style/article.md

@@ -13,7 +13,7 @@
 
 Её можно легко представить как шкаф с подписанными ящиками. Все данные хранятся в ящичках. По имени можно легко найти ящик и взять то значение, которое в нём лежит.
 
-<img src="object.svg">
+<img src="object.png">
 
 В отличие от реальных шкафов, в ассоциативный массив можно в любой момент добавить новые именованные "ящики" или удалить существующие. Далее мы увидим примеры, как это делается.
 
@@ -40,7 +40,7 @@
 var person = {}; // пока пустой
 ```
 
-<img src="object-person-empty.svg">
+<img src="object-person-empty.png">
 
 
 Основные операции с объектами -- это создание, получение и удаление свойств.
@@ -55,7 +55,7 @@ person.name = 'Вася';
 person.age = 25; // запишем ещё одно свойство: с именем 'age' и значением 25
 ```
 
-<img src="object-person-1.svg">
+<img src="object-person-1.png">
 
 Значения хранятся "внутри" ящиков. Обратим внимание -- любые значения, любых типов: число, строка -- не важно.
 
@@ -72,7 +72,7 @@ delete person.age;
 
 Осталось только свойство `name`:
 
-<img src="object-person-2.svg">
+<img src="object-person-2.png">
 
 Следующая операция:
 <ol start="4">

1-js/4-data-structures/4-object/article.md

@@ -15,7 +15,7 @@ var phrase = message;
 
 В результате такого копирования получились две полностью независимые переменные, в каждой из которых хранится значение `"Привет"`.
 
-<img src="variable-copy-value.svg">
+<img src="variable-copy-value.png">
 
 ## Копирование по ссылке
 
@@ -31,7 +31,7 @@ var user = {
 };
 ```
 
-<img src="variable-contains-reference.svg">
+<img src="variable-contains-reference.png">
 
 Внимание: объект -- вне переменной. В переменной -- лишь "адрес" (ссылка) для него.
 
@@ -48,7 +48,7 @@ var admin = user; // скопировали ссылку
 
 Получили две переменные, в которых находятся ссылки на один и тот же объект:
 
-<img src="variable-copy-reference.svg">
+<img src="variable-copy-reference.png">
 
 **Так как объект всего один, то изменения через любую переменную видны в других переменных:**
 

1-js/4-data-structures/6-object-reference/article.md

@@ -84,13 +84,13 @@ alert( arr[2].name ); // Петя
 
 Одно из применений массива -- это [очередь](http://ru.wikipedia.org/wiki/%D0%9E%D1%87%D0%B5%D1%80%D0%B5%D0%B4%D1%8C_%28%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%29). В классическом программировании так называют упорядоченную коллекцию элементов, такую что элементы добавляются в конец, а обрабатываются -- с начала. 
 
-<img src="queue.svg">
+<img src="queue.png">
 
 В реальной жизни эта структура данных встречается очень часто. Например, очередь сообщений, которые надо показать на экране.
 
 Очень близка к очереди еще одна структура данных: [стек](http://ru.wikipedia.org/wiki/%D0%A1%D1%82%D0%B5%D0%BA). Это такая коллекция элементов, в которой новые элементы добавляются в конец и берутся с конца. 
 
-<img src="stack.svg">
+<img src="stack.png">
 
 Например, стеком является колода карт, в которую новые карты кладутся сверху, и берутся -- тоже сверху.
 
@@ -225,7 +225,7 @@ alert( a ); // 0,,,,,5
 
 Методы `push/pop` выполняются быстро, а `shift/unshift` -- медленно.
 
-<img src="array-speed.svg">
+<img src="array-speed.png">
 
 
 Чтобы понять, почему работать с концом массива -- быстрее, чем с его началом, разберём подробнее происходящее при операции:
@@ -243,7 +243,7 @@ fruits.shift(); // убрать 1 элемент с начала
 <li>Обновить свойство `length`.</li>
 </ol>
 
-<img src="array-shift.svg">
+<img src="array-shift.png">
 
 **Чем больше элементов в массиве, тем дольше их перемещать, это много операций с памятью.**
 
@@ -257,7 +257,7 @@ fruits.shift(); // убрать 1 элемент с начала
 fruits.pop(); // убрать 1 элемент с конца
 ```
 
-<img src="array-pop.svg">
+<img src="array-pop.png">
 
 **Перемещать при `pop` не требуется, так как прочие элементы после этой операции остаются на тех же индексах.**
 

1-js/4-data-structures/7-array/article.md

@@ -23,7 +23,7 @@ var list = {
 ```
 
 Графическое представление этого списка:
-<img src="linked-list.svg">
+<img src="linked-list.png">
 
 Альтернативный способ создания:
 

1-js/4-data-structures/8-array-methods/9-output-single-linked-list/task.md

@@ -147,7 +147,7 @@ alert( result ); // 15
 
 Поток вычислений получается такой
 
-<img src="reduce.svg">
+<img src="reduce.png">
 
 В виде таблицы  где каждая строка -- вызов функции на очередном элементе массива:
 

1-js/4-data-structures/9-array-iteration/article.md

@@ -100,7 +100,7 @@ var family = marry({
 
 Получившийся объект `family` можно изобразить так:
 
-<img src="family.svg">
+<img src="family.png">
 
 Здесь стрелочками показаны ссылки, а вот свойство `name` ссылкой не является, там хранится примитив, поэтому оно внутри самого объекта.
 
@@ -115,13 +115,13 @@ delete family.mother.husband;
 
 А если две, то получается, что от бывшего `family.father` ссылки выходят, но в него -- ни одна не идёт:
 
-<img src="family-no-father.svg">
+<img src="family-no-father.png">
 
 **Совершенно неважно, что из объекта выходят какие-то ссылки, они не влияют на достижимость этого объекта.**
 
 Бывший `family.father` стал недостижимым и будет удалён вместе со своми данными, которые также более недоступны из программы.
 
-<img src="family-no-father-2.svg">
+<img src="family-no-father-2.png">
 
 А теперь -- рассмотрим более сложный случай. Что будет, если удалить главную ссылку `family`?
 
@@ -133,7 +133,7 @@ window.family = null;
 
 Результат:
 
-<img src="family-no-family.svg">
+<img src="family-no-family.png">
 
 Как видим, объекты в конструкции всё ещё связаны между собой. Однако, поиск от корня их не находит, они не достижимы, и значит сборщик мусора удалит их из памяти.
 

1-js/5-functions-closures/6-memory-management/article.md

@@ -184,7 +184,7 @@ setTimeout(function run() {
 
 При `setInterval` внутренний таймер будет срабатывать чётко каждые `100` мс и вызывать `func(i)`:
 
-<img src="setinterval-interval.svg">
+<img src="setinterval-interval.png">
 
 Вы обратили внимание?...
 
@@ -202,7 +202,7 @@ setTimeout(function run() {
 
 А так будет выглядить картинка с рекурсивным `setTimeout`:
 
-<img src="settimeout-interval.svg">
+<img src="settimeout-interval.png">
 
 **При рекурсивном `setTimeout` задержка всегда фиксирована и равна 100мс.**
 

1-js/7-js-misc/3-setTimeout-setInterval/article.md

@@ -38,7 +38,7 @@ alert( rabbit.eats ); // true
 
 Иллюстрация происходящего при чтении `rabbit.eats` (поиск идет снизу вверх):
 
-<img src="proto-animal-rabbit.svg">
+<img src="proto-animal-rabbit.png">
 
 **Объект, на который указывает ссылка `__proto__`, называется *"прототипом"*. В данном случае получилось, что `animal` является прототипом для `rabbit`.**
 

1-js/9-prototypes/1-prototype/article.md

@@ -33,7 +33,7 @@ alert( {}.__proto__.toString ); // function toString
 <li>В дальнейшем при обращении к `obj.toString()` -- функция будет взята из `Object.prototype`.</li>
 </ol>
 
-<img src="native-prototypes-object.svg">
+<img src="native-prototypes-object.png">
 
 Это можно легко проверить:
 
@@ -55,7 +55,7 @@ alert( obj.__proto__.__proto__ ); // null, нет
 
 Точно такой же подход используется в массивах `Array`, функциях `Function` и других объектах. Встроенные методы для них находятся в `Array.prototype`, `Function.prototype` и т.п.
 
-<img src="native-prototypes-classes.svg">
+<img src="native-prototypes-classes.png">
 
 Например, когда мы создаём массив, `[1, 2, 3]`, то это альтернативный вариант синтаксиса `new Array`, так что у массивов есть стандартный прототип `Array.prototype`.
 
@@ -81,7 +81,7 @@ alert( arr ); // 1,2,3 <-- результат Array.prototype.toString
 
 Как мы видели раньше, у `Object.prototype` есть свой `toString`, но так как в `Array.prototype` он ищется первым, то берётся именно вариант для массивов:
 
-<img src="native-prototypes-array-tostring.svg">
+<img src="native-prototypes-array-tostring.png">
 
 
 [smart header="Вызов методов через `apply` из прототипа"]

1-js/9-prototypes/3-native-prototypes/article.md

@@ -12,7 +12,7 @@
 
 Взглянем на него ещё раз на примере `Array`, который наследует от `Object`:
 
-<img src="class-inheritance-array-object.svg">
+<img src="class-inheritance-array-object.png">
 
 <ul>
 <li>Методы массивов `Array` хранятся в `Array.prototype`.</li>
@@ -109,7 +109,7 @@ Rabbit.prototype.jump = function() { ... };
 
 Теперь выглядеть иерархия будет так:
 
-<img src="class-inheritance-rabbit-animal.svg">
+<img src="class-inheritance-rabbit-animal.png">
 
 В `prototype` по умолчанию всегда находится свойство `constructor`, указывающее на функцию-конструктор. В частности, `Rabbit.prototype.constructor == Rabbit`. Если мы рассчитываем использовать это свойство, то при замене `prototype` через `Object.create` нужно его явно сохранить:
 
@@ -225,7 +225,7 @@ Rabbit.prototype.run = function(speed) {
 
 Вызов `rabbit.run()` теперь будет брать `run` из своего прототипа:
 
-<img src="class-inheritance-rabbit-run-animal.svg">
+<img src="class-inheritance-rabbit-run-animal.png">
 
 
 ### Вызов метода родителя внутри своего

1-js/9-prototypes/5-class-inheritance/article.md

@@ -72,7 +72,7 @@ alert( "Я люблю HTML5!".match(/\s\w\w\w\w\d/) ); // 'HTML5'
 
 Совпадение (каждому классу в регэкспе соответствует один символ результата):
 
-<img src="love-html5-classes.svg">
+<img src="love-html5-classes.png">
 
 ## Граница слова \b
 
@@ -103,7 +103,7 @@ alert( "Hello, Javascript!".match(/\bJava\b/) ); // null
 
 Например, в строке <code class="subject">Hello, Java!</code> под `\b` подходят следующие позиции:
 
-<img src="hello-java-boundaries.svg">
+<img src="hello-java-boundaries.png">
 
 Как правило, `\b` используется, чтобы искать отдельно стоящее слово. Не на русском конечно, хотя подобную проверку, как мы увидим далее, можно легко сделать для любого языка. А вот на английском, как в примере выше или для чисел, которые являются частным случаем `\w` -- легко.