course js day 1
TRANSCRIPT
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) [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