Denys Samoylenko ''JS learning lifehacks: common programmer's mistake''

Лайфхаки по
изучению JS:
основные ошибки,
совершаемые
программистами
Денис
Самойленко
Summer. Sea. JavaScript.

Откуда нам известны
«ошибки, совершаемые
программистами»?

IT-образование-
ради будущего!

itstep.org
Беларусь
Азербайджан
Грузия
Болгария
Румыния
Мексика
США
Словакия Польша
Молдова
Швейцария
Казахстан
Бразилия
Чехия
Камбоджа
Одесса
Николаев
Херсон
Мариуполь
Запорожье
Кривой Рог
Днепр
Каменское
ХарьковПолтава
Киев
Чернигов
ЖитомирЛьвов
Ивано-Франковск
Черновцы
Тернополь
Луцк
Ровно
Хмельницкий
Винница
Тбилиси
Баку
Минск
Бобруйск
Гомель
Пномпен
Прага
Брно
Рио-де-Жанейро
Астана
Караганда
Алматы
Женева
Кишинев
Варшава
Братислава
Сиэтл
18стран
65
филиалов
Тихуана
Бухарест
София
Могилев
Витебск
Брест

itstep.org
18Стран мира
1400преподавателей
45000
студентов
5000
компьютеров
300аудиторий
Дмитрий Корчевский
Основатель и генеральный директор
Компьютерной Академии ШАГ 120000
выпускников
65
филиалов

itstep.org
СовременностьПрофессионализм Забота
о студентах
Наши ценности

itstep.org
Разработка
программного
обеспечения
Компьютерная
графика и дизайн
Сети и
кибербезопасность
Программа - не имеющая аналогов
по направлениям:

JavaScript…
А нужно ли?

JavaScript – это интерпретируемый язык:
исходный код (текст программы) является и исполнимым кодом.
Это позволяет легко переносить программы на различные устройства:
ПК, планшеты, смартфоны, телевизоры.
Мне показалось или там было «телевизоры»?
Нет, не показалось, есть такой инструмент Samsung SDK специально для
Samsung SmartTV
Кросс-платформенный

JavaScript — это самый быстрый из интерпретируемых языков:
PHP, Ruby, Python и др.
Интерпретатор для JS разрабатывался в конкурентной борьбе – «войне
браузеров», тогда как другие языки – плоды спокойной работы
отдельных групп разработчиков.
Еще скажите, что JavaScript быстрее С++…
По некоторым тестам – да. Мощь JavaScript «съедается» браузером.
А вот без него, например в NodeJS, сомнения отпадают
Быстрый

Концепция Full Stack JavaScript
• browser (JavaScript)
• server (Node.js)
• database (MongoDB)
JavaScript является одним из наиболее востребованных языков на
рынке вакансий IT.
По данным рынка Европы JavaScript уверенно занимает первое место.
Популярный

JavaScript!?
Конечно нужно!

Я знаю С/С++, С#, сам изучил Pascal
Что мне стоит разобраться с JS!?

В браузерах основное предназначение JS — манипуляции с DOM.
10 перестроек 1 перестройка
Именно DOM не дает JavaScript проявить свою скорость…
Особенность 1. DOM
Вариант 1 Вариант 2
for( i=0; i<10; ++i )
label.innerHTML += i
str = ""
for(i=0; i<10; ++i) str += i
label.innerHTML = str

Переменные не нужно объявлять. Переменная создается
автоматически при первом обращении на запись. Это же касается и
полей в классах
Тип указывать не нужно – он будет автоматически определен
О чудесах динамической типизации Вы уже, наверняка, слышали
Особенность 2. Динамическая типизация
С / С++ / С# Pascal / Delphi JavaScript
int x;
x = 10;
var x:integer;
begin
x := 10;
x=10
или
var x=10

// установит красный фон для «element»
element.style.backgroundColor="red"
// создаст новое поле «BackgroundColor», ошибки нет
element.style.BackgroundColor="red"
// а эту «ошибку» я исправлял у каждого второго…
$.ajax({ url: "site.html",
sucsess: function(){...} })
Удобно, но…

JavaScript получает все данные от пользователя или из НТТР-пакета в
символьном (строковом) виде, даже если для этого применяются
элементы числового типа.
Z = X + Y // Z = 311
W = X – Y // W = -8
X.value > Y.value // true
Особенность 3. HTML, HTTP: Т – значит текстовый

С/С++ есть разница: объект - obj.field ссылка - ref->field
В JavaScript создание объектов – это создание ссылок на объекты. Хотя
для доступа применяется оператор «.» (точка)
a = { x:10, y:20 } // а – ссылка на объект { x:10, y:20 }
b = a // b – ссылка на тот же объект, что хранится в а
// казалось бы, меняем значение «b»
b.x = 30 // но…
console.log(a) // а={x: 30, y: 20}
Особенность 4. Ссылочные типы

ООП в JavaScript на более высоком уровне, чем у С/С++ или Pascal.
var f = function(){ alert( "f" ) }
f() // сообщение "f"
f.x = 10 // поле x объекта f
f() // работает как и раньше
f = 20 // новое значение f
f() // ошибка: f – не функция
Особенность 5. Функции – это объекты

Параметрический полиморфизм в JavaScript отсутствует.
А попроще? Функции не перегружаются
А по-человечески? Функции с разными параметрами – это одна и та же функция
function f(){ … } // определяем f
function f(x){ … } // переопределяем f
// в такой форме понятнее, почему f переопределяется
f = function(){ … }
f = function(x){ … }
И из-за того, что функции – это объекты…

Как думаете, какое сообщение выведет последняя строка кода?
f = [] // конструктор массива
for( i=0; i<3; ++i ) // заполнение массива функций
f[i] = function(){ alert(i) }
f[1]() // вызов функции из массива (с индексом 1)
Функция хранится как текст. Обращение к «i» произойдет в момент
вызова, так что i=3. Интерпретация – не компиляция…
И еще о функциях – позднее связывание

А вот тут начинается самое интересное…
Традиции взяли верх – указатель «this» показывает на тот объект,
которому принадлежит функция
a = {
name: "object a",
thisLogger: function(){ console.log( this ) }
}
a.thisLogger() // {name: "object a", thisLogger: ƒ}
Функция – объект. Значит «this» указывает на нее?

Если функция хранится как текст, то действует ли на «this» позднее
связывание? – Еще и как действует!
<div id="div1" ></div>
<script>
div1.onclick = a.thisLogger // а – описан слайдом выше
</script>
Что мы увидим в консоли, когда кликнем по блоку?
Правильно,
ведь функция будет вызвана из блока "div1"
А если добавить позднее связывание…

Функции, как объекты, могут иметь свои поля. Для того чтобы к ним
обратиться нужно…
Именовать анонимные функции – все просто!
f = function self( ) { // named function expression
alert( self.x ) // обращение к «своему» полю х
}
f.x = 10 // поле х объекта f
f() // сообщение – 10
Если «this» это не this, то как добраться до this?

Вариант 1 Вариант 2 Вариант 3
<form onsubmit="handler()">
<input type="submit" value="Go" />
</form>
<script>
function handler(){ return false; }
</script>
<form id="form1">
</form>
<script>
form1.addEventListener("submit",
function() { return false; } )
</script>
<form id="form1">
</form>
<script>
form1.onsubmit =
function() { return false; }
</script>
Необходимо
onsubmit="return handler()"
Необходимо
function(e){ e.preventDefault(); …
Без дополнений,
все работает
Простая задача - предотвратить отправку HTML-формы
Особенность 6. Обработчики событий

Все определения переменных оператором «var» и функций
перемещаются (поднимаются) в начало области видимости.
Особенность 7. Поднятие определений (hoisting)
Мы пишем А определения поднимаются
for(var i=0; i<3; ++i)
console.log(i)
var i
for(i=0; i<3; ++i)
console.log(i)

Во-первых, это удобно. Не нужно объявлять прототипы функций до
того, как они будут использованы. Функцию можно описать в любом
месте – как до, так и после места первого вызова.
Во-вторых, это необычно. Переменные присутствуют ДО их
объявления.
В-третьих, это опасно. Не запрещено написать «var х» несколько раз. А
значит, можно подменить ранее описанную переменную.
И что такого в этом поднятии?

Для «var» их две – глобальная и функциональная (тело функции)
console.log(i) // udefined
console.log(j) // error
for(var i=0; i<3; ++i) console.log(i)
console.log(i) // 3
В современном стандарте введена инструкция «let i»,
ограничивающая область видимости текущим блоком, однако,
следует помнить и о поведении инструкции «var»
А где границы области видимости?

Что мы увидим в консоли в каждом из вариантов?
function f() {
return 1
}
console.log( f() )
function f() {
return 2
}
console.log( f() )
function f() {
return 1
}
function f() {
return 2
}
var f = function() {
return 1
}
console.log( f() )
return 2
}
console.log( f() )
return 1
}
return 2
}
? ? ? ?
И где тут можно ошибиться программисту?

Что мы увидим в консоли в каждом из вариантов?
function f() {
return 1
}
console.log( f() )
function f() {
return 2
}
console.log( f() )
function f() {
return 1
}
function f() {
return 2
}
return 1
}
console.log( f() )
return 2
}
console.log( f() )
return 1
}
return 2
}
2 2 1
(поднимается только var f)
Uncaught TypeError:
f is not a function
Уверен, Вы так и подумали

0.2 + 0.7 == 0.9 // false: 0,2+0,7 = 0.8999999999999999
0.1 + 0.2 == 0.3 // false: 0,1+0,2 = 0.30000000000000004
0.2+0.7 + 0.1+0.2 == 0.9+0.3 // true
10000000000000000 == 10000000000000001 // true
10000000000000000 == 10000000000000002 // false
1e400 == 1e500 // true: Infinity == Infinity
Math.log(-1) == Math.log(-1) // false: NaN
Математика – царица наук! Вы уже в курсе…

JavaScript прекрасен!
Но будьте с ним осторожны…

Contacts
https://itstep.org/
+38 (048) 728-66-60
+38 (067) 557 87 05
+38 (0512) 67 00 53
+38 (050) 443 61 00

Denys Samoylenko ''JS learning lifehacks: common programmer's mistake''

Recommended

More Related Content

What's hot (20)

Similar to Denys Samoylenko ''JS learning lifehacks: common programmer's mistake'' (20)

More from OdessaJS Conf (20)

Denys Samoylenko ''JS learning lifehacks: common programmer's mistake''