javascript. introduction (in russian)
TRANSCRIPT
![Page 1: JavaScript. Introduction (in russian)](https://reader034.vdocuments.site/reader034/viewer/2022042521/557f6b5dd8b42aab368b4ab3/html5/thumbnails/1.jpg)
![Page 2: JavaScript. Introduction (in russian)](https://reader034.vdocuments.site/reader034/viewer/2022042521/557f6b5dd8b42aab368b4ab3/html5/thumbnails/2.jpg)
Михаил Давыдов Разработчик JavaScript
JavaScript
![Page 3: JavaScript. Introduction (in russian)](https://reader034.vdocuments.site/reader034/viewer/2022042521/557f6b5dd8b42aab368b4ab3/html5/thumbnails/3.jpg)
3
История
• Брендан Айх • 1995 год, Netscape • Цель – альтернатива VBScript • Разработан за 15 дней • Имя JavaScript – маркетинговый ход
![Page 4: JavaScript. Introduction (in russian)](https://reader034.vdocuments.site/reader034/viewer/2022042521/557f6b5dd8b42aab368b4ab3/html5/thumbnails/4.jpg)
4
ECMAScript и JavaScript
• JavaScript (c) Oracle Corporation • JScript=JavaScript • Основывается на стандарте ECMAScript • Текущая версия ECMAScript – 5.1 • Все пишут на ECMAScript – 3 • Новые версии сохраняют совместимость
![Page 5: JavaScript. Introduction (in russian)](https://reader034.vdocuments.site/reader034/viewer/2022042521/557f6b5dd8b42aab368b4ab3/html5/thumbnails/5.jpg)
Особенности языка
Виртуальная машина
Автоматическое приведение типов
Утиная типизация
Мультипарадигменный
![Page 6: JavaScript. Introduction (in russian)](https://reader034.vdocuments.site/reader034/viewer/2022042521/557f6b5dd8b42aab368b4ab3/html5/thumbnails/6.jpg)
6
Виртуальная машина
DOM VM JS
Среда Виртуалка
GUI Интерфейс
![Page 7: JavaScript. Introduction (in russian)](https://reader034.vdocuments.site/reader034/viewer/2022042521/557f6b5dd8b42aab368b4ab3/html5/thumbnails/7.jpg)
7
Автоматическое приведение типов
• 2 + “3” == “23”!• 2 + 3 == 5!• [] + 1 == “1”!• if ([1, 2, 4]) {}!• 0 == “0”!
![Page 8: JavaScript. Introduction (in russian)](https://reader034.vdocuments.site/reader034/viewer/2022042521/557f6b5dd8b42aab368b4ab3/html5/thumbnails/8.jpg)
8
Если оно выглядит как утка, плавает как утка и крякает как утка, то это, вероятно, утка и есть.
var Duck = { lookLikeDuck: true, quackLikeDuck: true, swimLikeDuck: true, }; if (a.lookLikeDuck && a.quackLikeDuck && a.swimLikeDuck) { return “Это Утка!”; }
Утиная типизация
![Page 9: JavaScript. Introduction (in russian)](https://reader034.vdocuments.site/reader034/viewer/2022042521/557f6b5dd8b42aab368b4ab3/html5/thumbnails/9.jpg)
9
Мультипарадигменный
• Очень гибкий • Функциональный подход • Классовый подход
– Классов в JavaScript нет
• Прототипный подход
![Page 10: JavaScript. Introduction (in russian)](https://reader034.vdocuments.site/reader034/viewer/2022042521/557f6b5dd8b42aab368b4ab3/html5/thumbnails/10.jpg)
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);
Классовый подход
![Page 11: JavaScript. Introduction (in russian)](https://reader034.vdocuments.site/reader034/viewer/2022042521/557f6b5dd8b42aab368b4ab3/html5/thumbnails/11.jpg)
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
Функциональный подход
![Page 12: JavaScript. Introduction (in russian)](https://reader034.vdocuments.site/reader034/viewer/2022042521/557f6b5dd8b42aab368b4ab3/html5/thumbnails/12.jpg)
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);
Прототипный подход
![Page 13: JavaScript. Introduction (in russian)](https://reader034.vdocuments.site/reader034/viewer/2022042521/557f6b5dd8b42aab368b4ab3/html5/thumbnails/13.jpg)
Распространение
Поддержка языка
Распостраненность
Популярность
![Page 14: JavaScript. Introduction (in russian)](https://reader034.vdocuments.site/reader034/viewer/2022042521/557f6b5dd8b42aab368b4ab3/html5/thumbnails/14.jpg)
14
Разработка языка
• Google • Mozilla • Microsoft • Opera • Apple • Oracle • …
![Page 15: JavaScript. Introduction (in russian)](https://reader034.vdocuments.site/reader034/viewer/2022042521/557f6b5dd8b42aab368b4ab3/html5/thumbnails/15.jpg)
15
Распостраненность языка • Есть практически в любом устройстве
– Компьютеры – Телевизоры – Планшеты – Телефоны
• Есть и на сервере – Серверный JavaScript – Node.js, Narwal, Rhino – Встроенная Виртуальаня машина в БД
• Можно программировать железо – Arduino + johnny-five
• Не только браузер – Microsoft Office – OpenOffice.org – PDF
![Page 16: JavaScript. Introduction (in russian)](https://reader034.vdocuments.site/reader034/viewer/2022042521/557f6b5dd8b42aab368b4ab3/html5/thumbnails/16.jpg)
16
Распостраненность языка
• Огромное число библиотек для всего – DOM – 2D графика – 3D графика – Работа со звуком
• Транслирование в JavaScript – CoffeeScript – Dart – TypeScript
• Возможно это самая распостраненная виртуальная машина
![Page 17: JavaScript. Introduction (in russian)](https://reader034.vdocuments.site/reader034/viewer/2022042521/557f6b5dd8b42aab368b4ab3/html5/thumbnails/17.jpg)
17
Популярность языка
• Низкий порог входа – Блокнот и браузер
• № 1 на Github • TIOBE Index – 11 место
– Год назад 12
![Page 18: JavaScript. Introduction (in russian)](https://reader034.vdocuments.site/reader034/viewer/2022042521/557f6b5dd8b42aab368b4ab3/html5/thumbnails/18.jpg)
Проблемы языка
XSS
Открытый код
Асинхронное программирование
![Page 19: JavaScript. Introduction (in russian)](https://reader034.vdocuments.site/reader034/viewer/2022042521/557f6b5dd8b42aab368b4ab3/html5/thumbnails/19.jpg)
19
Проблемы безопасности
• XSS – Атака на пользовательскую страницу – Хищение сессионных данных – Порча данных – Боты – DDOS
• Тщательная обработка полей – Важно проверять все входные данные
• Ваш скрипт не единственный на странице – Плагины – Пользовательские скрипты – Боты – Вирусы
![Page 20: JavaScript. Introduction (in russian)](https://reader034.vdocuments.site/reader034/viewer/2022042521/557f6b5dd8b42aab368b4ab3/html5/thumbnails/20.jpg)
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/
![Page 21: JavaScript. Introduction (in russian)](https://reader034.vdocuments.site/reader034/viewer/2022042521/557f6b5dd8b42aab368b4ab3/html5/thumbnails/21.jpg)
21
<img src="a" onerror="alert(0)"/>
![Page 22: JavaScript. Introduction (in russian)](https://reader034.vdocuments.site/reader034/viewer/2022042521/557f6b5dd8b42aab368b4ab3/html5/thumbnails/22.jpg)
Демки
2D
3D
Видео
Мобильные приложения
Firefox OS
![Page 23: JavaScript. Introduction (in russian)](https://reader034.vdocuments.site/reader034/viewer/2022042521/557f6b5dd8b42aab368b4ab3/html5/thumbnails/23.jpg)
23
2D – Графики
http://www.humblesoftware.com/flotr2
![Page 24: JavaScript. Introduction (in russian)](https://reader034.vdocuments.site/reader034/viewer/2022042521/557f6b5dd8b42aab368b4ab3/html5/thumbnails/24.jpg)
24
2D – Игры
http://playbiolab.com/
![Page 25: JavaScript. Introduction (in russian)](https://reader034.vdocuments.site/reader034/viewer/2022042521/557f6b5dd8b42aab368b4ab3/html5/thumbnails/25.jpg)
25
3D – WebGL, Three.js
http://mrdoob.github.com/three.js/
![Page 26: JavaScript. Introduction (in russian)](https://reader034.vdocuments.site/reader034/viewer/2022042521/557f6b5dd8b42aab368b4ab3/html5/thumbnails/26.jpg)
26
Видео
http://media.chikuyonok.ru/ambilight/
![Page 27: JavaScript. Introduction (in russian)](https://reader034.vdocuments.site/reader034/viewer/2022042521/557f6b5dd8b42aab368b4ab3/html5/thumbnails/27.jpg)
27
PhoneGap
- Карты
- Контакты
- Звонки
- Компас
- GPS
- Акселометр
http://phonegap.com/
![Page 28: JavaScript. Introduction (in russian)](https://reader034.vdocuments.site/reader034/viewer/2022042521/557f6b5dd8b42aab368b4ab3/html5/thumbnails/28.jpg)
28
LinkedIn Mobile
![Page 29: JavaScript. Introduction (in russian)](https://reader034.vdocuments.site/reader034/viewer/2022042521/557f6b5dd8b42aab368b4ab3/html5/thumbnails/29.jpg)
29
Firefox Mobile OS
![Page 30: JavaScript. Introduction (in russian)](https://reader034.vdocuments.site/reader034/viewer/2022042521/557f6b5dd8b42aab368b4ab3/html5/thumbnails/30.jpg)
Наш рабочий процесс
![Page 31: JavaScript. Introduction (in russian)](https://reader034.vdocuments.site/reader034/viewer/2022042521/557f6b5dd8b42aab368b4ab3/html5/thumbnails/31.jpg)
31
Инструменты
• http://jsfiddle.net/ • http://jslint.com/
![Page 32: JavaScript. Introduction (in russian)](https://reader034.vdocuments.site/reader034/viewer/2022042521/557f6b5dd8b42aab368b4ab3/html5/thumbnails/32.jpg)
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/
![Page 33: JavaScript. Introduction (in russian)](https://reader034.vdocuments.site/reader034/viewer/2022042521/557f6b5dd8b42aab368b4ab3/html5/thumbnails/33.jpg)
33
Задание 1
• Причесать ваш код из тестового задания • Ваш скрипт должен лежать отдельно от html • Нужно отформатировать код
– Использовать http://jslint.com/ – Или выбрать свой кодстайл
• Обратить внимание – Наличие var – Отступы рядом с =, операторами и function – Или табы или пробелы – Заменить new Array() на []; new Object() на {};