JavaScript. Introduction (in russian)
1 like508 views
Документ описывает историю и особенности языка программирования JavaScript, его развитие и популярность. Рассматриваются различные подходы к программированию, включая функциональный, классический и прототипный, а также затрагиваются проблемы безопасности и распространенность JavaScript в современных устройствах и приложениях. Упоминаются инструменты и библиотеки, используемые для разработки, и даются рекомендации по качеству кода.
![7
Автоматическое приведение типов
• 2 + “3” == “23”!
• 2 + 3 == 5!
• [] + 1 == “1”!
• if ([1, 2, 4]) {}!
• 0 == “0”!](https://image.slidesharecdn.com/js-140318114537-phpapp01/85/JavaScript-Introduction-in-russian-7-320.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
Функциональный подход](https://image.slidesharecdn.com/js-140318114537-phpapp01/85/JavaScript-Introduction-in-russian-11-320.jpg)
![33
Задание 1
• Причесать ваш код из тестового задания
• Ваш скрипт должен лежать отдельно от html
• Нужно отформатировать код
– Использовать http://jslint.com/
– Или выбрать свой кодстайл
• Обратить внимание
– Наличие var
– Отступы рядом с =, операторами и function
– Или табы или пробелы
– Заменить new Array() на []; new Object() на {};](https://image.slidesharecdn.com/js-140318114537-phpapp01/85/JavaScript-Introduction-in-russian-33-320.jpg)
JavaScript. Introduction (in russian)
- 3. 3 История • Брендан Айх • 1995 год, Netscape • Цель – альтернатива VBScript • Разработан за 15 дней • Имя JavaScript – маркетинговый ход
- 4. 4 ECMAScript и JavaScript • JavaScript (c) Oracle Corporation • JScript=JavaScript • Основывается на стандарте ECMAScript • Текущая версия ECMAScript – 5.1 • Все пишут на ECMAScript – 3 • Новые версии сохраняют совместимость
- 5. Особенности языка Виртуальная машина Автоматическое приведение типов Утиная типизация Мультипарадигменный
- 6. 6 Виртуальная машина DOM VM JS Среда Виртуалка GUI Интерфейс
- 7. 7 Автоматическое приведение типов • 2 + “3” == “23”! • 2 + 3 == 5! • [] + 1 == “1”! • if ([1, 2, 4]) {}! • 0 == “0”!
- 8. 8 Если оно выглядит как утка, плавает как утка и крякает как утка, то это, вероятно, утка и есть. var Duck = { lookLikeDuck: true, quackLikeDuck: true, swimLikeDuck: true, }; if (a.lookLikeDuck && a.quackLikeDuck && a.swimLikeDuck) { return “Это Утка!”; } Утиная типизация
- 9. 9 Мультипарадигменный • Очень гибкий • Функциональный подход • Классовый подход – Классов в JavaScript нет • Прототипный подход
- 10. 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. 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. 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. 14 Разработка языка • Google • Mozilla • Microsoft • Opera • Apple • Oracle • …
- 15. 15 Распостраненность языка • Есть практически в любом устройстве – Компьютеры – Телевизоры – Планшеты – Телефоны • Есть и на сервере – Серверный JavaScript – Node.js, Narwal, Rhino – Встроенная Виртуальаня машина в БД • Можно программировать железо – Arduino + johnny-five • Не только браузер – Microsoft Office – OpenOffice.org – PDF
- 16. 16 Распостраненность языка • Огромное число библиотек для всего – DOM – 2D графика – 3D графика – Работа со звуком • Транслирование в JavaScript – CoffeeScript – Dart – TypeScript • Возможно это самая распостраненная виртуальная машина
- 17. 17 Популярность языка • Низкий порог входа – Блокнот и браузер • № 1 на Github • TIOBE Index – 11 место – Год назад 12
- 18. Проблемы языка XSS Открытый код Асинхронное программирование
- 19. 19 Проблемы безопасности • XSS – Атака на пользовательскую страницу – Хищение сессионных данных – Порча данных – Боты – DDOS • Тщательная обработка полей – Важно проверять все входные данные • Ваш скрипт не единственный на странице – Плагины – Пользовательские скрипты – Боты – Вирусы
- 20. 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/
- 25. 25 3D – WebGL, Three.js http://mrdoob.github.com/three.js/
- 27. 27 PhoneGap - Карты - Контакты - Звонки - Компас - GPS - Акселометр http://phonegap.com/
- 32. 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. 33 Задание 1 • Причесать ваш код из тестового задания • Ваш скрипт должен лежать отдельно от html • Нужно отформатировать код – Использовать http://jslint.com/ – Или выбрать свой кодстайл • Обратить внимание – Наличие var – Отступы рядом с =, операторами и function – Или табы или пробелы – Заменить new Array() на []; new Object() на {};