course js day 1
TRANSCRIPT
![Page 1: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/1.jpg)
JavaScript
Georgy Grigoryev, Auriga, Inc.
![Page 2: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/2.jpg)
2
Состав вебинаров:
Вводный: история JS, реализации и стандарты. Операторы и типизация.
Основные конструкции языка, как они используются. ООП и контекст
JS+HTML: BOM, DOM, события и свойства, AJAX JS фреймворки: jQuery, AngularJS, CoffeeScript, Node.js
![Page 3: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/3.jpg)
3
Javascript – Появился в 1995 году
JavaScript – создали в компании Netscape Navigator
Автор языка – Брендан Айк
![Page 4: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/4.jpg)
4
Брендан Айк
Работал в Mozzilla Foundation с момента её основания, в 2014 проработал несколько дней в качестве CEO
![Page 5: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/5.jpg)
5
LiveScript JavaScript ECMAScript
LiveScript появился в Netscape Navigator
Позже, LiveScript переименовали в JavaScript
И после выпуска Jscript, Netscape инициировала стандартизацию в ECMA
![Page 6: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/6.jpg)
6
JScript
Microsoft , спустя год, выпустил свою версию JavaScript, назвав её JScript.
Брендан Айк: «Считайте, что JavaScript (пожалуйста, только не Jscript) спас вас от VBscript»
![Page 7: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/7.jpg)
7
msn.com
Появился раньше чем JavaScript
![Page 8: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/8.jpg)
8
Использование JavaScript
WebWindowsEmbedded languageServerClient
![Page 9: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/9.jpg)
9
FirefoxOS, Windows Phone
![Page 10: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/10.jpg)
10
Node.js, ActionScript
![Page 11: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/11.jpg)
11
Стандарты
• ECMAScript – актуальная версия 5.• Последняя версия 6• Используются версии 5 и 3• Таблица реализации ECMAScript 6
http://kangax.github.io/compat-table/es6/
![Page 12: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/12.jpg)
12
JavaScript vs JScript
Подсистема ввода-выводаActiveX
![Page 13: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/13.jpg)
13
IDE
WebStormVisual Studio 2008/201xSublime text 2/3
![Page 14: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/14.jpg)
14
WebStorm
![Page 15: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/15.jpg)
15
Visual Studio
![Page 16: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/16.jpg)
16
Sublime text 2/3
![Page 17: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/17.jpg)
17
Запуск JS в браузере
Через строку адресаИспользуя скрипт на страницеЗапустив консоль отладки
![Page 18: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/18.jpg)
18
Запуск js через строку адреса
javascript:alert(“hello world!”);
![Page 19: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/19.jpg)
19
Запуск скрипта через закладку в браузере
javascript:var el=document.getElementById("tRSSREADER@911621291"); el.parentNode.removeChild(el);
![Page 20: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/20.jpg)
20
Встраивание скрипта на страницу
<script type="text/javascript"> function button_click(){ alert("Great!");}</script> <script type="text/javascript" src="javascript_test.js"></script>
![Page 21: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/21.jpg)
21
Подключение скрипта из CDN
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
![Page 22: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/22.jpg)
22
Средства разработки/отладки
Просмотр кода страницыДебаггер скриптовКонсоль отладкиСредства отслеживания запросов (не везде)
![Page 23: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/23.jpg)
23
Средства отслеживания запросов Chrome
![Page 24: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/24.jpg)
24
Средства отслеживания запросов IE11
![Page 25: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/25.jpg)
25
Консоль браузера
Практически во всех браузерах(точно нет в IE6)Выполняет произвольный код Контекстом служит текущая страницаДоступны все объекты со страницы и сама страница
Стандартная горячая клавиша F12
![Page 26: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/26.jpg)
26
Консоль в Chrome
![Page 27: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/27.jpg)
27
Консоль в IE11
![Page 28: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/28.jpg)
28
Проверка консоли
alert(“console test”); console.log(“function foo”)
![Page 29: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/29.jpg)
29
Jscript в Windows
Встроенный интерпретатор wscript.exe и консольный интерпретатор cscript.exe
![Page 30: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/30.jpg)
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 через командную строку
![Page 31: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/31.jpg)
31
Операторы в JavaScript
Комментарии и кавычки//однострочный комментарий/*многострочкый комментарий*/alert("comment") //можно двойные использоватьalert('comment') // можно одинарныеalert("It's comment") // можно оба типа сразу
![Page 32: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/32.jpg)
32
Операторы в JavaScript
Присваивание значений:var a = "value";b = "what?";
![Page 33: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/33.jpg)
33
Операторы в JavaScript
Условный оператор:var a = 1;var b = 2;if (a == b) { console.log("equal");} else { console.log('not equal');}
![Page 34: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/34.jpg)
34
Операторы в JavaScript
Цикл whilevar i = 0while (i < 10) { console.log(i) i++;}
![Page 35: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/35.jpg)
35
Операторы в JavaScript
Цикл forfor(var i = 0; i <10;i++){ console.log(i);}
![Page 36: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/36.jpg)
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;}
![Page 37: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/37.jpg)
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); // остаток от деления
![Page 38: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/38.jpg)
38
Операторы в JavaScript
Инкремент, декремент. Операторы доступны как пост- так и пре-.
var b = 15;for(var i = 1; i < 10 ; i++){ console.log(i); console.log(--b);}
![Page 39: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/39.jpg)
39
Операторы в JavaScript
Тернарный условный оператор:console.log(1==2?"matrix":"not matrix");
![Page 40: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/40.jpg)
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);}
![Page 41: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/41.jpg)
41
Операторы в JavaScript
Точка с запятойvar a = 1; a++; var t = a*2;
![Page 42: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/42.jpg)
42
Операторы меняющие смысл при переводе строки
Пост- инкрементПост- декрементcontinuebreak return throw
![Page 43: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/43.jpg)
43
Операторы меняющие смысл
Не заработает:function GetPerson() { return { "name":"John Doe", "age": 30 }}
![Page 44: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/44.jpg)
44
Область видимости
Всегда используйте var!function ShowTip(){ message = "debug info"; console.log(message);}message = "Hello user!";console.log(message);ShowTip();console.log(message);
![Page 45: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/45.jpg)
45
Область видимости
Область видимости создают только методыif(message!=""){ var counter = 1;}console.log(counter);
![Page 46: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/46.jpg)
46
4 типа данных
NumberStringBooleanObject
![Page 47: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/47.jpg)
47
Number
8 байт, плавающая точкаСпециальные значения: NaN, Infinity
![Page 48: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/48.jpg)
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
![Page 49: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/49.jpg)
49
Преобразование типов
Преобразование в строкуdocument.title = 1 > 0;
var a = "2";var b = 1;var c = a + b;console.log(c);
![Page 50: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/50.jpg)
50
Преобразование типов
Преобразование в числоvar a = "123";if (Number(a) == 123) { console.log("is true");}
var a = "123";if (+a == 123) { console.log("is true");}
![Page 51: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/51.jpg)
51
Преобразование типов
Преобразование в числоconsole.log(Number(true)); // 1console.log(Number(false)); // 0console.log(Number(null)); // 0console.log(Number(undefined))// NaN
![Page 52: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/52.jpg)
52
Преобразование типов
Преобразование в булевый типconsole.log(!!1); // trueconsole.log(!!0); // falseconsole.log(!!"foo"); // trueconsole.log(!!""); // falseconsole.log(!!NaN); // falseconsole.log(!!Infinity);// true
![Page 53: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/53.jpg)
53
Бонус
Гарри Бернхард - Wat? https://www.destroyallsoftware.com/talks/wat
![Page 54: course js day 1](https://reader036.vdocuments.mx/reader036/viewer/2022081520/58eb9b4f1a28ab903f8b471d/html5/thumbnails/54.jpg)
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) [email protected] www.auriga.com
Auriga, Russia125 Varshavskoe Shosse, Unit 16A
Moscow, 117587Tel:+7 (495) 713-9900 Fax:+7 (495) 939-0300
[email protected] www.auriga.com