�ݺ�ߣ

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
Web
Windows
Embedded language
Server
Client

11
Стандарты
• ECMAScript – актуальная версия 5.
• Последняя версия 6
• Используются версии 5 и 3
• Таблица реализации ECMAScript 6
http://kangax.github.io/compat-table/es6/

12
JavaScript vs JScript
Подсистема ввода-вывода
ActiveX

13
IDE
WebStorm
Visual Studio 2008/201x
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=/slideshow/course-js-day-1/62504542/"javascript_test.js"></script>

21
Подключение скрипта из CDN
<script src=/slideshow/course-js-day-1/62504542/"/ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

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

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

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

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
Присваивание значений:
var a = "value";
b = "what?";

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

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

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

36
Оператор switch
var 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
Арифметические операторы
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
Инкремент, декремент. Операторы доступны как пост- так и пре-.
var b = 15;
for(var i = 1; i < 10 ; i++)
{
console.log(i);
console.log(--b);
}

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

40
Запятая
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
Точка с запятой
var a = 1;
a++; var t = a*2;

42
Операторы меняющие смысл при переводе строки
Пост- инкремент
Пост- декремент
continue
break
return
throw

43
Операторы меняющие смысл
Не заработает:
function GetPerson() {
return
{
"name":"John Doe",
"age": 30
}
}

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

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

46
4 типа данных
Number
String
Boolean
Object

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)); // 1
console.log(Number(false)); // 0
console.log(Number(null)); // 0
console.log(Number(undefined))// NaN

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

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

54
Contacts
Thank You and
We Look Forward to Working with You
Auriga, USA
92 Potter Rd, Ste 1
Wilton, NH 03086, USA
Phone: +1 (866) 645-1119
Fax: +1 (603) 386-6097
info@auriga.com
www.auriga.com
Auriga, Russia
125 Varshavskoe Shosse, Unit 16A
Moscow, 117587
Tel:+7 (495) 713-9900
Fax:+7 (495) 939-0300
info@auriga.com
www.auriga.com

�ݺ�ߣ

course js day 1

More Related Content

course js day 1