JavaScript, часть 1

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 ночи.

До завтра, посоны :)















Report Page