Академия: JavaScript. Введение.

Недавно я начала изучать JavaScript.

Для этого я взяла один курс на edx.org в рамках программы от @academy от World Wide Web Consortium, а второй, незадолго до этого, на codeschool. Конспект составлен только по курсу на edx.org

Что хочется отметить сразу: курс на edx (о чем не раз говорит преподаватель, который его ведет) дает более теоретические знания простых функций языка, немного знакомит с более сложными, охватывает просто экосистему и комплексно затрагивает связанные языки, такие как HTML, CSS.
Курс на codeschool дает более практические навыки в написании и изучении (он, кстати, интерактивный и яркий, так что, как минимум, эстетическое удовольствие вам гарантировано).

Мой бэкграунд

Начну с того, что в программировании я новичок, поэтому возможны неточности в интерпретировании и понимании некоторых понятий или функций, буду благодарна, если более разбирающиеся люди меня исправят.

С чем знакомилась до начала курса:

• основы html на teamtreehouse
• основы css на teamtreehouse

О курсе

Курс достаточно объемный, построен из текстовых описаний и видео, где, по сути, повторяется все то, что было в тексте.

Плюс: информация воспринимается сразу в несколько подходов, поэтому не стоит выбирать текст или видео, лучше сделать и то, и второе, что улучшит понимание новой темы. Также в курсе есть CodePen - интерактивный код, который позволяет "играться" с кодом, менять значения и смотреть, какая функция на что влияет.

JavaScript - пока единственный язык, который выполняется в браузере без установления компилятора, как правило, он используется вместе с HTML и CSS, есть смысл сначала познакомиться с азами этих двух языков, а потом параллельно учить их три.

HTML - для структуризации
CSS - для визуализации элементов
JavaScript - для интерактивности, как "связующее звено" между HTML и CSS.

Компоненты в JavaScript (краткий обзор)

Переменные (variable)

• переменные хранятся в памяти компьютера
• var - обозначаются переменные в версии JS < 5 (до 2015 года)
• let - обозначаются переменные в версии JSES2015/ES2016 или JavaScript 6/7
• JS - слабо типизированный язык: не требуется указывать тип переменной
• Для переменной первая буква является строчной буквой и каждая первая буква каждого слова капитализируется. Пример: var myVariableName
• JavaScript 5 / ES5 имеете 2 типа переменных: глобальные (не находятся внутри функции) и локальные (находятся внутри функции)

JavaScript порой много допускающий язык. Мы можем делать глупые ошибки, которые потом очень сложно обнаружить. Одна из таких ошибок появляется, когда мы просто забываем поставить var, когда обозначаем локальную переменную.

• В JavaScript 6 / ES6 переменная обозначается let, а константа - const.
• У JavaScript 6/ES6 есть два типа переменных: глобальная (для обозначения переменных доступных в любом месте кода) и которая находится в скобках { } (block scope).
• внутри скобок локальная переменная маскирует (подменяет значение) других переменных из более широкого scope на значение из локального.

Типы данных

• number: 1,2,105,3.14 ...
• string: 'a', "one", 'two' , 'World Wide Web' ...
• boolean: true / false
• undefined: absent or unknown value
• null: special keyword, meaning no value or empty.

Операторы и выражения (operator and expression)

Выражение представляет собой небольшой фрагмент кода, используемый для создания значения.
Для работы с выражениями нужны операторы.

В JavaScript оператор может быть унарным или бинарным. Унарный оператор применяется к одному выражению.

Примеры:

• Бинарные операторы:
  +, - , /, *, %

• Унарные операторы:
  ++, --, -

Строки (Strings)

Строки - это тип данных. Для их обозначения используют двойные или одинарные кавычки. Разницы между ними нет, но, как правило, используют одинарные кавычки.

Объекты

Объекты в JS выделяются "{" и "}", например,

var p = {givenName:'Michel', familyName: 'Buffa'}
givenName и familyName называются "свойствами" и Michel и Buffa - это присваиваемые значения.

Для того, чтобы получить свойства объектов используется оператор "."

daysOfTheWeek.length
вернет количество свойств в объекте.

Матрицы (Arrays)

Матрицы - объект JS, "контейнеры" для элементов.

Матрицы выделяются скобками.

var daysOfWeek = [];

У каждого элемента есть свой порядковый номер. Номер первого элемента - 0.

Функции

Функция позволяет группировать код, давать ему имя и выполнять его, вызывая по имени.

Они всегда возвращают значение.

Также в курсе есть небольшой проект в данном модуле, где уже можно создать первый интерактивный график функции.

Главная идея: пробуйте "играться" с кодом, даже, если вы что-то не понимаете, то все равно пишите, меняйте в нем что-то и смотрите, как и на что эти изменения влияют. Не пытайтесь сразу и все понять, дайте себе время.

Всем теплых улыбок :)
До встречи!