JavaScript, часть 1
Дмитрий КоновенскийНапишите в комментариях VK какое то умное слово.
#general_UTM_HS #coding_UTM_HS #theory_UTM_HS
Итак, дошли у меня таки руки.
Начнем учить то, с чем будет иметь дело каждый из вас, а именно с JS.
Что есть JS.
JS - Скриптовый язык ( http://bit.ly/2mpHH7Z ).
Для нас он замечателен тем, что начав учить его вы сможете сменить свой путь в любое время .
Где писать код?
- В любом текстовом редакоре
- в WebStorm (BEST CHOICE)
- в Atom
Где открывать?
Пока что в браузере (пока что - это для backend ветки).
Либо в консоли (Кнопка F12 в браузере)
Чо делать?
Читать и делать
Начнем'с
Итак. Открываем браузер. Нажимаем F12.
Зачем был придуман JS? - Для придания вебу интерактивности и динамики.
Сейчас мы напишем свой Hello World.
В консоли пишем:
alert("Hello world!");
Поздравляю: Вы написали первую JS программу.
Никаких вам громоздких инклюдов и тд (пока что :)
Теория:
JS - Регистрозависим (переменные A и a - 2 разные переменные)
JS имеет динамическую типизацию (ща расскажу)
ООП в JS является прототипным (потом)
Комментарии:
// - однострочный
/*многострочный*/
Синтаксис похож на С (притянуто за уши, но пока так)
По порядку:
ПЕРЕМЕННЫЕ:
Переменные в JS объявляются 4мя вариантами:
- как мудак
- как устаревший мудак
- как пацан, которому нужна переменная
- как пацан, которому нужна константа
УТОЧНЮ, ЧТО ЗДЕСЬ ОБЪЯСНЯЕТСЯ ИМЕННО ОБЪЯВЛЕНИЕ ПЕРЕМЕННОЙ, А НЕ ЕЕ ИСПОЛЬЗОВАНИЕ ИЛИ ЗАМЕНА ЗНАЧЕНИЕ (re-assignment)
Итак:
Как мудак:
Мудаки инициализируют переменную так:
variable_a = 1;
Ведет это к ошибком и неопределенному поведению. Сейчас не буду объяснять почему, просто поверьте на слово - так делают мудаки.
Как устаревший мудак:
Устаревшие мудаки инициализируют её так:
var variable_a = 1;
И сейчас минимум 2-3 жопы подорвутся: ЁПТ, ДА КАК ТАК, ТАК ЖЕ ВО ВСЕХ МАНУАЛАХ НАПИСАНО!!11
Отвечаю: Да - написано, но только я не рассматриваю говно мамонта, как мануал.
Раньше var было единственным ключевым словом для объявления переменной. Сейчас добавили вещи круче и логичнее.
Вы можете использовать var в специфичных случаях, но вы до них не скоро доберетесь. В большинстве случаев, var переменные имеют не самые лучшие свойства, за которые раньше JS и ненавидели. Этой теме я выделю статью отдельно, но позже.
Как пацан, которому нужна переменная:
Тот самый адекватный способ, которым вы будете пользоваться большую часть времени. Добавили его, как и следующий способ, в стандарте языка ECMAScript-2015 или ES6 (А следующий стандарт называется ECMAScript-2016 или ES7).
Объявляется переменная так:
let variable_a = 1;
Особенности let:
- Переменная может быть переназначена
- Переменная не может быть переопределена: http://pastebin.com/qnBjcGxx
- Область видимости - блок {...} http://pastebin.com/p5qDpyzP
- Можно переопределить в другом блоке, не влияя на внешнюю переменную: http://pastebin.com/03fPPLh1
Как пацан, которому нужна константа:
ES6 принес нам еще и const. Это то же самое, что и let, но с одним изменение:
const нельзя переназначить. Но, если это объект (ВСЁ ПОТОМ ОБЪЯСНЮ), то можно переназначить член объекта. Пример: http://pastebin.com/suW5scuT
ТИПЫ:
JS - динамически типизированный язык.
- Какой?
Как вы думаете, почему мы объявляем переменную не так: int a = 1;
Потому что тут нет такого понятия, как строгая типизация, ведь здесь это не нужно.
Мы можем сделать так: http://pastebin.com/0fW2ayJb
Это все не отрывки кода, а целый скрипт, который завершится успешно.
Динамическая типизация позволяет творить такие вещи, но пользоваться этим нужно в разумных пределах :)
Узнать тип переменной вы можете так : typeof variable_a
- А какие типы есть?
4 примитива:
Числовой, строковый, булевый, undefined(неопределенный)
и 3 базовых:
объекты, функции(да, это тип), массивы. (Так же они являются ссылочными)
Операции над типами:
+ - * / %(их, надеюсь, объяснять не надо)
==, >,<,>=,<=,!=сравнение чисел и строк
=== сравнение с типом. Например:
1 == '1' //true
1 === '1' //false
!, &&, || - булевы операторы
+ конкатенация строк ("aa" + "bb" //aabb)
ФУНКЦИИ:
Функции - фишка JS.
Функция имеет такую же область видимости, как и стандартный {...} блок.
Функции можно просто объявить, а можно присвоить переменной: http://pastebin.com/UMVmH8rs
Зачем нужно присваивание переменной? Скорее не зачем, а почему. Как вы заметили, в JS есть тип, который называется функция. Де-факто - мы можем передавать функции, как аргумент функции.
- Кхм... нафуя?
Применение огромное, используется в 98% JS кода. Смотрим пример: http://pastebin.com/heBzW8Z0
Тут мы сделали функцию трансформации числа, в которую можем передать дополнительную обработку.
Теперь по порядку:
Функции, которые мы присваивали переменной, так же сразу передавали в функцию, без присваивания называются анонимными функциями. Называются они так, потому что у них (барабанная дробь) нету имени. Еще у этих функций есть следующие названия: лямбда-функции и замыкания. All the same. К этой хрени просто надо привыкнуть. ES6 принес нам такую весчь, как Arrow functions или стрелочные функции. Объявляются они так: http://pastebin.com/je029G6P
***СЕЙЧАС БУДЕТ СЛОЖНО ТЕМ, КТО НЕ ЗНАЕТ ООП, ПОЙМЕТЕ ПОТОМ***
Обратите внимание на код в конце. Во многих языках this является зарезервированым словом.
Оно указывает на текущий объект. ВСЕ ПЕРЕМЕННЫЕ В JS ЯВЛЯЮТСЯ ОБЪЕКТАМИ.
Следовательно и функции JS - так же являются объектами. В обычных лямбдах this указывает на текущую функцию. Но, ООП в JS - штука своеобразная и спорная. Поэтому, при юзании ооп, надо было ебаться с бубном, из-за того, что методы класса меняли контекст this, на себя. Поэтому, в стрелочных функциях, this УКАЗЫВАЕТ НЕ НА ФУНКЦИЮ, А НА ТОТ КОНТЕКСТ, ИЗ КОТОРОГО ОНА БЫЛА ВЫЗВАНА. Так что юзать их надо с умом.
***СЛОЖНОТА ЗАКОНЧИЛАСЬ(нет:)***
ОБЪЕКТЫ:
Сейчас буду делать то, что должен был делать Фалько - Знакомить вас с основами ООП (Объектно Ориентированного Программирования). Я не великий препод, так что если непонятно - гуглим курс по ООП
Допустим мы хотим закодить собачку. Но мы не мудаки, и хотим закодить ее по пацански. Даже не одну, а 100. И 3 породы чтоб было. Что нам для этого надо? Написать 100 функций под 100 собак? НЕТ! Написать шаблон, в котором будут указаны параметры собачки(аттрибуты класса), и чо она может делать вообще(методы класса). Все это вместе будет единым целым, или собачкой. Вот так мы познакомились с первым из трех столпов ООП - инкапсюляцией. Инкапсюляция - это когда n аттрибутов и f методов создают единый объект, которым можно манипулировать, как целым объектом.
Но есть прикол. Породы то 3, а куча черт у них совпадает. Что делать? Тут вступает второй столп ООП - Наследование. Мы должны сделать базовый класс - ОбщаяСобака (Слитно, ибо это название класса). В ней мы укажем, что у нашей собаки 2 глаза, хвост, 2 уха, 4 лапы, может гавкать, так же там будет тембр голоса. Теперь мы создаём 3 класса (3 породы), которые будут наследовать базовые качества собаки. Так мы сделаем прототип, который сделает наш код более чистым.
Есть проблема. Одна из пород имеет 3 глаза и 1 ухо. Для нее нужно писать новый базовый класс? Нет! Последний, но не по значению, столп - Полиморфизм. В новом классе мы все так же наследуем базовый класс, но нужные нам аттрибуты мы переназначаем по новой.
Ок! 3 класса есть - что дальше? А дальше мы просто говорим - создать объект класса Овчарка. В цикле. 33 раза. Одной строкой мы создаем 33 идентичных объекта. Так же и с другими породами. Если мы попросим залаять одну собаку - залает только одна, а не все, ибо будет вызвана функция именно того объекта, который нам нужен.
Объяснил хренво. Кто перепросит - не обижусь.
https://jsfiddle.net/sz73v4ok/
Ок. Это было в общем. Теперь про JS.
Раньше, доисторические программисты еблись с прототипами и прочей ебалой.
С ES6 - это уже в прошлом. Добавили более-менее сносное подобие ООП.
Пройдусь по ключевым моментом, дальше пробуйте сами что то поделать, опираясь на мой пример сверху:
class - ключевое слово
extends - наследование другого класса
constructor() - функция, которая всегда выполняется сразу после создания объекта
super() - магическая функция. Вызывается в конструторе, чтобы запустить конструктор родительского класса. Если конструктора в дочернем классе нет, то запускается автоматически.
this - переменная, которая всегда указывает на текущий объект. Нужна чисто внутри класса
Чтобы вызвать метод объекта или получить доступ к его аттрибуту, необходимо написать ИМЯ_ОБЪЕКТА.АТТРИБУТ или ИМЯОБЪЕКТА.МЕТОД()
Любая переменная - объект. У любого из таких объектов есть свойства. Например
"ad asd asd".length //10
и тд.
В JS есть куча встроенных объектов, таких как Math, Date, String и тд.
( https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects )
Потренируйтесь с ними
ФУНКЦИИ НА ПЕРВОЕ ВРЕМЯ
console.log
alert
document.write
УЧЕБНИК:
http://learn.javascript.ru/
ЗАДАНИЯ:
1) Напишите программу, которая будет выводить на экран факториал, логарифм, степень. Это должны быть функции.
2) Дополню завтра, вырубаюсь нахуй, 3.30 ночи.
До завтра, посоны :)