JavaScript

Georgy Grigoryev, Auriga, Inc.

2

Состав вебинаров:

Вводный: история JS, реализации и стандарты. Операторы и типизация.

Основные конструкции языка, как они используются. ООП и контекст

JS+HTML: BOM, DOM, события и свойства, AJAX JS фреймворки: jQuery, AngularJS, CoffeeScript, Node.js

3

Javascript – Появился в 1995 году

JavaScript – создали в компании Netscape Navigator

Автор языка – Брендан Айк

4

Брендан Айк

Работал в Mozzilla Foundation с момента её основания, в 2014 проработал несколько дней в качестве CEO

5

LiveScript JavaScript ECMAScript

LiveScript появился в Netscape Navigator

Позже, LiveScript переименовали в JavaScript

И после выпуска Jscript, Netscape инициировала стандартизацию в ECMA

6

JScript

Microsoft , спустя год, выпустил свою версию JavaScript, назвав её JScript.

Брендан Айк: «Считайте, что JavaScript (пожалуйста, только не Jscript) спас вас от VBscript»

7

msn.com

Появился раньше чем JavaScript

8

Использование JavaScript

WebWindowsEmbedded languageServerClient

9

FirefoxOS, Windows Phone

10

Node.js, ActionScript

11

Стандарты

• ECMAScript – актуальная версия 5.• Последняя версия 6• Используются версии 5 и 3• Таблица реализации ECMAScript 6

http://kangax.github.io/compat-table/es6/

12

JavaScript vs JScript

Подсистема ввода-выводаActiveX

13

IDE

WebStormVisual Studio 2008/201xSublime text 2/3

14

WebStorm

15

Visual Studio

16

Sublime text 2/3

17

Запуск JS в браузере

Через строку адресаИспользуя скрипт на страницеЗапустив консоль отладки

18

Запуск js через строку адреса

javascript:alert(“hello world!”);

19

Запуск скрипта через закладку в браузере

javascript:var el=document.getElementById("tRSSREADER@911621291"); el.parentNode.removeChild(el);

20

Встраивание скрипта на страницу

<script type="text/javascript"> function button_click(){ alert("Great!");}</script> <script type="text/javascript" src="javascript_test.js"></script>

21

Подключение скрипта из CDN

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

22

Средства разработки/отладки

Просмотр кода страницыДебаггер скриптовКонсоль отладкиСредства отслеживания запросов (не везде)

23

Средства отслеживания запросов Chrome

24

Средства отслеживания запросов IE11

25

Консоль браузера

Практически во всех браузерах(точно нет в IE6)Выполняет произвольный код Контекстом служит текущая страницаДоступны все объекты со страницы и сама страница

Стандартная горячая клавиша F12

26

Консоль в Chrome

27

Консоль в IE11

28

Проверка консоли

alert(“console test”); console.log(“function foo”) 

29

Jscript в Windows

Встроенный интерпретатор wscript.exe и консольный интерпретатор cscript.exe

30

Работа с файлами JScript

var fso = new ActiveXObject("Scripting.FileSystemObject");var a = fso.CreateTextFile("c:\\testfile.txt", true);a.WriteLine("This is a test.");a.Close();

wscript "d:\jscript_write_to_file.js"

JScript

Запуск js через командную строку

31

Операторы в JavaScript

Комментарии и кавычки//однострочный комментарий/*многострочкый комментарий*/alert("comment") //можно двойные использоватьalert('comment') // можно одинарныеalert("It's comment") // можно оба типа сразу

32

Операторы в JavaScript

Присваивание значений:var a = "value";b = "what?";

33

Операторы в JavaScript

Условный оператор:var a = 1;var b = 2;if (a == b) { console.log("equal");} else { console.log('not equal');}

34

Операторы в JavaScript

Цикл whilevar i = 0while (i < 10) { console.log(i) i++;}

35

Операторы в JavaScript

Цикл forfor(var i = 0; i <10;i++){ console.log(i);}

36

Операторы в JavaScript

Оператор switchvar a = 't';switch(a){ case 't': console.log("it's equal t"); break; case 'y': console.log("it's equal y"); break; default: console.log("empty"); break;}

37

Операторы в JavaScript

Арифметические операторыvar a = 2;var b = 3;console.log(a+b);console.log(a-b);console.log(a*b);console.log(a/b);console.log(a%b); // остаток от деления

38

Операторы в JavaScript

Инкремент, декремент. Операторы доступны как пост- так и пре-.

var b = 15;for(var i = 1; i < 10 ; i++){ console.log(i); console.log(--b);}

39

Операторы в JavaScript

Тернарный условный оператор:console.log(1==2?"matrix":"not matrix");

40

Операторы в JavaScript

Запятаяvar a,b,c;

for (a = 1, b = 3, c = a*b; a < 10; a++) { console.log(a); console.log(b); console.log(c);}

41

Операторы в JavaScript

Точка с запятойvar a = 1; a++; var t = a*2;

42

Операторы меняющие смысл при переводе строки

Пост- инкрементПост- декрементcontinuebreak return throw

43

Операторы меняющие смысл

Не заработает:function GetPerson() { return { "name":"John Doe", "age": 30 }}

44

Область видимости

Всегда используйте var!function ShowTip(){ message = "debug info"; console.log(message);}message = "Hello user!";console.log(message);ShowTip();console.log(message);

45

Область видимости

Область видимости создают только методыif(message!=""){ var counter = 1;}console.log(counter);

46

4 типа данных

NumberStringBooleanObject

47

Number

8 байт, плавающая точкаСпециальные значения: NaN, Infinity

48

String

ИммутабельнаяИмеет встроенные методы работы со строкамиvar str = "".concat("Embeded ", "string ", "functions! ");console.log(str.trim().substr(0, 18));

var str = "Embeded string functions!";console.log(str.substr(-10));

substr, substring

49

Преобразование типов

Преобразование в строкуdocument.title = 1 > 0;

var a = "2";var b = 1;var c = a + b;console.log(c);

50

Преобразование типов

Преобразование в числоvar a = "123";if (Number(a) == 123) { console.log("is true");}

var a = "123";if (+a == 123) { console.log("is true");}

51

Преобразование типов

Преобразование в числоconsole.log(Number(true)); // 1console.log(Number(false)); // 0console.log(Number(null)); // 0console.log(Number(undefined))// NaN

52

Преобразование типов

Преобразование в булевый типconsole.log(!!1); // trueconsole.log(!!0); // falseconsole.log(!!"foo"); // trueconsole.log(!!""); // falseconsole.log(!!NaN); // falseconsole.log(!!Infinity);// true

53

Бонус

Гарри Бернхард - Wat? https://www.destroyallsoftware.com/talks/wat

54

Contacts

Thank You andWe Look Forward to Working with You

Auriga, USA 92 Potter Rd, Ste 1Wilton, NH 03086, USAPhone: +1 (866) 645-1119Fax: +1 (603) 386-6097info@auriga.com www.auriga.com

Auriga, Russia125 Varshavskoe Shosse, Unit 16A

Moscow, 117587Tel:+7 (495) 713-9900 Fax:+7 (495) 939-0300

info@auriga.com www.auriga.com