Upgrade to Pro — share decks privately, control downloads, hide ads and more …

КРиПИ - Введение в JavaScript

КРиПИ - Введение в JavaScript

Mikhail Davydov

October 11, 2012
Tweet

More Decks by Mikhail Davydov

Other Decks in Education

Transcript

  1. 3 История •  Брендан Айх •  1995 год, Netscape • 

    Цель – альтернатива VBScript •  Разработан за 15 дней •  Имя JavaScript – маркетинговый ход
  2. 4 ECMAScript и JavaScript •  JavaScript (c) Oracle Corporation • 

    JScript=JavaScript •  Основывается на стандарте ECMAScript •  Текущая версия ECMAScript – 5.1 •  Все пишут на ECMAScript – 3 •  Новые версии сохраняют совместимость
  3. 6 Виртуальная машина DOM   VM   JS   Среда

    Виртуалка GUI   Интерфейс
  4. 7 Автоматическое приведение типов •  2 + “3” == “23”!

    •  2 + 3 == 5! •  [] + 1 == “1”! •  if ([1, 2, 4]) {}! •  0 == “0”!
  5. 8 Если оно выглядит как утка, плавает как утка и

    крякает как утка, то это, вероятно, утка и есть. var Duck = { lookLikeDuck: true, quackLikeDuck: true, swimLikeDuck: true, }; if (a.lookLikeDuck && a.quackLikeDuck && a.swimLikeDuck) { return “Это Утка!”; } Утиная типизация
  6. 9 Мультипарадигменный •  Очень гибкий •  Функциональный подход •  Классовый

    подход –  Классов в JavaScript нет •  Прототипный подход
  7. 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); Классовый подход
  8. 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 Функциональный подход
  9. 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); Прототипный подход
  10. 15 Распостраненность языка •  Есть практически в любом устройстве – 

    Компьютеры –  Телевизоры –  Планшеты –  Телефоны •  Есть и на сервере –  Серверный JavaScript – Node.js, Narwal, Rhino –  Встроенная Виртуальаня машина в БД •  Можно программировать железо –  Arduino + johnny-five •  Не только браузер –  Microsoft Office –  OpenOffice.org –  PDF
  11. 16 Распостраненность языка •  Огромное число библиотек для всего – 

    DOM –  2D графика –  3D графика –  Работа со звуком •  Транслирование в JavaScript –  CoffeeScript –  Dart –  TypeScript •  Возможно это самая распостраненная виртуальная машина
  12. 17 Популярность языка •  Низкий порог входа –  Блокнот и

    браузер •  № 1 на Github •  TIOBE Index – 11 место –  Год назад 12
  13. 19 Проблемы безопасности •  XSS –  Атака на пользовательскую страницу

    –  Хищение сессионных данных –  Порча данных –  Боты –  DDOS •  Тщательная обработка полей –  Важно проверять все входные данные •  Ваш скрипт не единственный на странице –  Плагины –  Пользовательские скрипты –  Боты –  Вирусы
  14. 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/
  15. 27 PhoneGap - Карты - Контакты - Звонки - Компас

    - GPS - Акселометр http://phonegap.com/
  16. 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/
  17. 33 Задание 1 •  Причесать ваш код из тестового задания

    •  Ваш скрипт должен лежать отдельно от html •  Нужно отформатировать код –  Использовать http://jslint.com/ –  Или выбрать свой кодстайл •  Обратить внимание –  Наличие var –  Отступы рядом с =, операторами и function –  Или табы или пробелы –  Заменить new Array() на []; new Object() на {};