Upload
mikhail-davydov
View
224
Download
4
Embed Size (px)
Citation preview
Михаил Давыдов Разработчик JavaScript
JavaScript
3
История
• Брендан Айх • 1995 год, Netscape • Цель – альтернатива VBScript • Разработан за 15 дней • Имя JavaScript – маркетинговый ход
4
ECMAScript и JavaScript
• JavaScript (c) Oracle Corporation • JScript=JavaScript • Основывается на стандарте ECMAScript • Текущая версия ECMAScript – 5.1 • Все пишут на ECMAScript – 3 • Новые версии сохраняют совместимость
Особенности языка
Виртуальная машина
Автоматическое приведение типов
Утиная типизация
Мультипарадигменный
6
Виртуальная машина
DOM VM JS
Среда Виртуалка
GUI Интерфейс
7
Автоматическое приведение типов
• 2 + “3” == “23”!• 2 + 3 == 5!• [] + 1 == “1”!• if ([1, 2, 4]) {}!• 0 == “0”!
8
Если оно выглядит как утка, плавает как утка и крякает как утка, то это, вероятно, утка и есть.
var Duck = { lookLikeDuck: true, quackLikeDuck: true, swimLikeDuck: true, }; if (a.lookLikeDuck && a.quackLikeDuck && a.swimLikeDuck) { return “Это Утка!”; }
Утиная типизация
9
Мультипарадигменный
• Очень гибкий • Функциональный подход • Классовый подход
– Классов в JavaScript нет
• Прототипный подход
10
Используется библиотека Mootools!
var Animal = new Class({ initialize: function(age){ this.age = age; } }); var Cat = new Class({ Extends: Animal, initialize: function(name, age){ this.parent(age); this.name = name; } }); var myCat = new Cat('Pewpew', 20); alert(myCat.name); alert(myCat.age);
Классовый подход
11
Используется ECMAScript 5.1
var items = [1, 2, 3, 4, {}]; var result = items.filter(function (item) { return typeof item === “number”; }) .map(function (item) { return item * 2; }) .every(function (item) { return item > 2; }); alert(result); // false
Функциональный подход
12
var Animal = function(age){ this.age = age; }; var Cat = function(name, age){ Animal.call(this, age); this.name = name; } Cat.prototype = new Animal(); var myCat = new Cat('Pewpew', 20); alert(myCat.name); alert(myCat.age);
Прототипный подход
Распространение
Поддержка языка
Распостраненность
Популярность
14
Разработка языка
• Google • Mozilla • Microsoft • Opera • Apple • Oracle • …
15
Распостраненность языка • Есть практически в любом устройстве
– Компьютеры – Телевизоры – Планшеты – Телефоны
• Есть и на сервере – Серверный JavaScript – Node.js, Narwal, Rhino – Встроенная Виртуальаня машина в БД
• Можно программировать железо – Arduino + johnny-five
• Не только браузер – Microsoft Office – OpenOffice.org – PDF
16
Распостраненность языка
• Огромное число библиотек для всего – DOM – 2D графика – 3D графика – Работа со звуком
• Транслирование в JavaScript – CoffeeScript – Dart – TypeScript
• Возможно это самая распостраненная виртуальная машина
17
Популярность языка
• Низкий порог входа – Блокнот и браузер
• № 1 на Github • TIOBE Index – 11 место
– Год назад 12
Проблемы языка
XSS
Открытый код
Асинхронное программирование
19
Проблемы безопасности
• XSS – Атака на пользовательскую страницу – Хищение сессионных данных – Порча данных – Боты – DDOS
• Тщательная обработка полей – Важно проверять все входные данные
• Ваш скрипт не единственный на странице – Плагины – Пользовательские скрипты – Боты – Вирусы
20
<form> <input id="name">
</form> My name is <span id="result"></span>
XSS
var inputName = document.getElementById("name"), result = document.getElementById("result"); inputName.addEventListener("keyup", function () { result.innerHTML = inputName.value; }, false);
http://jsfiddle.net/FfXaJ/2/
21
<img src="a" onerror="alert(0)"/>
Демки
2D
3D
Видео
Мобильные приложения
Firefox OS
23
2D – Графики
http://www.humblesoftware.com/flotr2
24
2D – Игры
http://playbiolab.com/
25
3D – WebGL, Three.js
http://mrdoob.github.com/three.js/
26
Видео
http://media.chikuyonok.ru/ambilight/
27
PhoneGap
- Карты
- Контакты
- Звонки
- Компас
- GPS
- Акселометр
http://phonegap.com/
28
LinkedIn Mobile
29
Firefox Mobile OS
Наш рабочий процесс
31
Инструменты
• http://jsfiddle.net/ • http://jslint.com/
32
a=function(b) { if(b)return 1 };a();
Качество кода
var█a█=█function█(b)█{ if█(b)█{ return 1; } }; a();
http://jsfiddle.net/4En9B/
http://jsfiddle.net/4En9B/1/
33
Задание 1
• Причесать ваш код из тестового задания • Ваш скрипт должен лежать отдельно от html • Нужно отформатировать код
– Использовать http://jslint.com/ – Или выбрать свой кодстайл
• Обратить внимание – Наличие var – Отступы рядом с =, операторами и function – Или табы или пробелы – Заменить new Array() на []; new Object() на {};