Алгоритмизация и программирование. Введение в JavaScript

языка. Стандарты.
Языки поверх JavaScript.
Экосистема JavaScript.
Литература

лёгком скриптовом языке (или языке сценариев — прим.ред.), способном работать с DOM, который в те дни не был стандартизирован.

JAVA – для инженеров

JAVA – для дизайнеров

Брендан Айк

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

typeof "hello world"
"string"
typeof new String('hello world')
"object"

перемещения указателя мыши, нажатие клавиш с клавиатуры.
Осуществлять проверку ввода данных в поля формы до отправки на сервер, что в свою очередь снимает дополнительную нагрузку с сервера.
Создавать и считывать cookie, извлекать данные о компьютере посетителя.
Определять браузер.
Изменять содержимое HTML-элементов, добавлять новые теги, изменять стили.

не были открыты с его помощью.
Не может защитить исходный код страницы и запретить копирование текста или изображений со страницы.
Не может осуществлять кроссдоменные запросы, получать доступ к веб-страницам, расположенным на другом домене. Даже когда страницы из разных доменов отображаются в одно и тоже время в разных вкладках браузера, то код JavaScript принадлежащий одному домену не будет иметь доступа к информации о веб-странице из другого домена. Это гарантирует безопасность частной информации, которая может быть известна владельцу домена, страница которого открыта в соседней вкладке.
Не имеет доступа к файлам, расположенным на компьютере пользователя, и доступа за пределы самой веб-страницы, единственным исключением являются файлы cookie, это небольшие текстовые файлы, которые JavaScript может записывать и считывать.

прототипной организацией, имеющий концепцию объекта в качестве базовой абстракции.

«ES» – это сокращение от «ECMAScript». Изначально номера версий стандарта обозначались цифрами, прибавляемыми к «ES».
Первые три релиза выходили ежегодно (1997-99гг.), это ES1, ES2 и ES3. Четвертый выпуск не состоялся «в связи с политическими расхождениями, касающимися запутанности языка». Следующая версия, ES5, увидела свет почти десять лет спустя, в декабре 2009 года.
Начиная с шестой версии было решено возобновить ежегодный выпуск релизов, а вместо порядкового номера добавлять год издания. Таким образом, в 2015 году вышла не ES6, а ES2015. В течение последующих двух лет вышли ES2016 и ES2017.

...
let o1 = { a: 1, b: 2 }, o2 = { c: 3 };
let o3 = { ... o1, ... o2, d: 4 };
console.log(o3.a, o3.b, o3.c, o3.d);
// 1 2 3 4

//destructured properties
let o1 = { b: 2, c: 3, d: 4 };
let { b, ... o2 } = o1;
console.log(b, o2.c, o2.d); // 2 3 4

//Array#includes(..)
let vals = [ "foo" , "bar" , 42, "baz" ];
if (vals.includes( 42 )) {
// found it!
}

//Async function
async function main() {
let ret = await step1();
ret = await step2( ret );
ret = await Promise.all([
step3a( ret ),
step3b( ret ),
step3c( ret )]);
await step4( ret );
}

//SIMD (Single Instruction Multiple Data)
var a = SIMD.Float32x4(1, 2, 3, 4);
var b = SIMD.Float32x4(5, 6, 7, 8);
var c = SIMD.Float32x4.add(a,b); // Float32x4[6,8,10,12]

//object.observe(..)
let obj = { a: 1, b: 2 };
Object.observe(obj, function(changes){
for (var change of changes) {
console.log( change );
}
},
[ "add" , "update" , "delete"]
);
obj.c = 3;
// { name: "c", object: obj, type: "add" }

он кажется похожим на руби, питонистам он похож на питон, и конечно же, он похож на яваскрипт. CoffeeScript старается упростить использование яваскрипта, сохранив все его сильные стороны.

# Assignment:
number = 42
opposite = true
# Conditions:
number = -42 if opposite
# Functions:
square = (x) -> x * x
# Arrays:
list = [1, 2, 3, 4, 5]
# Objects:
math =
root: Math.sqrt
square: square
cube: (x) -> x * square x

http://coffeescript.org/

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

http://www.typescriptlang.org/

interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = { firstName: "Jane", lastName: "User" };
document.body.innerHTML = greeter(user);

скоупами, замыканиями, и опционально — статической типизацией. Dart помогает создавать структурированные веб приложения и легок в изучении для широкого круга разработчиков.

http://www.dartlang.org/

class Point {
final double x, y;
const Point(this.x, this.y);
bool get isInsideUnitCircle => x * x + y * y <= 1;
}

экосистему библиотек, фреймворков, инструментов, менеджеров пакетов и новых языков, которые компилируются до JavaScript.

Библиотека — это готовый к использованию набор кода, который бежит в контексте приложения, и точно так же выполняет свою работу. То есть библиотека становится при подключении частью приложения.

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

API - это интерфейс взаимодействия с программой извне.

API это паттерн.

Библиотеки и фреймворки предоставляют API.

API может создаваться на базе фреймворка.

Фреймворк состоит из библиотек или являет собой паттерн их соединения.

Библиотека может собираться фреймворком платформы.

и Instagram. React была признана самой любимой технологией среди разработчиков, согласно опросу Stack Overflow Survey 2017.
React является самым популярным проектом JavaScript, основываясь на подсчете звезд GitHub.

https://reactjs.org/

Можно создать интерактивный интерфейс с использованием декларативного подхода.
Использование компонентной модели и виртуального DOM.

DOM на основе селекторов CSS, обработку событий и создание вызовов AJAX.

https://jquery.com/

библиотека JavaScript для создания интерактивных визуализаций с использованием веб-стандартов, таких как SVG, HTML и CSS. В отличие от других библиотек визуализации, D3 предлагает лучший контроль над окончательным визуальным результатом.

D3 работает, связывая данные с DOM и затем преобразуя их в документ.

https://d3js.org/

на JavaScript.

https://angular.io/

Некоторые из функций Angular 2 включают:
TypeScript поверх JavaScript как язык по умолчанию
компонентная архитектура
улучшенная производительность как на мобильных, так и на веб-платформах
лучшие инструменты и варианты скаффолдинга

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

https://vuejs.org/

Vue.js использует систему реактивности, чтобы определить, что изменилось и перераспределяет минимальное количество компонентов.

Он следует за стандартным подходом к настройке, который популярен среди сторонних фреймворков, таких как Ruby on Rails и Laravel.

https://www.emberjs.com/

Стек Ember обычно включает:
Ember CLI: предоставляет основные варианты скаффолдинга и поддерживает сотни надстроек.
Ember Data: библиотека сохранения данных, которая может быть настроена для работы с любым сервером.
Ember Inspector: расширение доступно для Chrome и Firefox.
Liquid Fire: дополнение для переходов и анимации.

как исполнитель задач и как система сборки в веб-разработке. Компиляция, минимизация кода, оптимизация изображения, модульное тестирование, листинг и т.д. - это повторяющиеся задачи, которые должны быть автоматизированы.

https://gulpjs.com/

Gulp использует конвейеры для потоковой передачи данных из одного плагина в другой, и конечный результат выводится в папку назначения.

ES-2015 (и выше) в код на предыдущем стандарте ES5.
Он состоит из двух частей:
Собственно транспайлер, который переписывает код.
Полифилл, который добавляет методы Array.from, String.prototype.repeat и другие.

https://babeljs.io/

Транспайлер (Transpiler) - это тот же транслятор с той лишь разницей, что у результата примерно тот же уровень абстракции, что и у исходного текста.

«Полифилл» (англ. polyfill) – это библиотека, которая добавляет в старые браузеры поддержку возможностей, которые в современных браузерах являются встроенными.

на изучение и освоение нового инструмента, что займет у вас так же время. Ввода дополнительных зависимостей в ваш проект можно избежать, выбирая альтернативу, которая уже связана с Node.js. Хотя npm больше известен как менеджер пакетов, сценарии npm можно использовать для выполнения основной части вышеупомянутых задач.

https://www.npmjs.com/

созданная Facebook и хорошо принятая сообществом React. Самое большое преимущество использования Jest перед другими наборами тестов заключается в том, что вам требуется нулевая или минимальная конфигурация для начала написания тестов. Фреймворк имеет встроенную библиотеку утверждений и поддерживает использование макетных функций или шпионов.

Jest имеет функцию под названием «snapshot testing», которая позволяет гарантировать, что пользовательский интерфейс приложения не изменится неожиданно.

https://facebook.github.io/jest/

поддержку браузера, поддержку асинхронного обслуживания, включая перспективы, отчеты об охвате тестирования и JavaScript API для запуска тестов. Mocha часто соединяется с библиотекой утверждений, такой как Chai, should.js, expect.js, потому что у нее нет собственной библиотеки утверждений.

https://mochajs.org/

Жасмин стремится стать браузером, платформой и независимым от фреймворка набором тестов. У Jasmine есть своя собственная библиотека утверждений, называемая matchers, которая дает инструменту чистый и легко читаемый синтаксис. Jasmine не имеет встроенного тестового исполнителя, и вам, возможно, придется использовать общий тестовый исполнитель, например, Karma.

https://jasmine.github.io/

https://www.gitbook.com/book/karmazzin/eloquentjavascript_ru/details
Ресурс с кратким изложением основ - http://bonsaiden.github.io/JavaScript-Garden/ru/
Печатные издания:
Kyle Simpson, You Don’t Know JS: ES6 and Beyond, O’Reilly, 2015
http://es6-features.org/
Марк Бейтс. CofeeScript. Второе дыхание JavaScript: пер. с англ. А.Кисилев. – М.: ДМК Пресс, 2012. – 312 с