Меню
Спросить
JS

Синтаксис и переменные в JavaScript

11 октября 2017
Синтаксис и переменные в JavaScript

Привет мир! В прошлой части мы уже поздоровались с JavaScriptом. В этой статье поговорим о структуре кода и переменных в JavaScript. Если вам что-то не понятно или я не договорил, может вам что-то интересно узнать, пожалуйста пишите мне, например вк или кому как удобно, я постараюсь ответить на каждый вопрос и возможно даже отдельным видео и статьей. Я хотел бы чтобы вы действительно начали понимать сайтостроение и если помогать друг другу, то так будет легче. Поехали =)

Синтаксис JavaScript

Или структура кода. Конечно сразу весь синтаксис мы не запомним, это будет происходить в процессе изучения, но сегодня стоит все-таки поговорить о некоторых важных вещах.
Начнем с простого, на прошлом уроке мы использовали команду вывода. В конце команды я поставил точку с запятой, это первое что вы должны запомнить. Мы написали какую-то команду или операцию и в конце обязаны поставить точку с запятой.

  1. команда блаблабла;
  2. 2+2;
  3. подвинуть блок вправо на сто пикселей;

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

Комментарии в JavaScript

Комментарии в JavaScript схожи с комментариями в языке CSS. Если же вы вообще не знаете, что такое комментарии, то кратко расскажу. Комментарии - это та часть кода, которая игнорируется компьютером, в основном они предназначены для людей. Например, вы написали большой код и чтобы выделить какие-то его части, то есть не забыть где и что находится, используем комментарии, чтобы оставить этакую заметку.
То есть для того, чтобы закомментировать одну строку, достаточно двух слэшей перед ней:

  1. // Закомментированный текст

Чтобы закомментировать более одной строки, используем слэш и звездочку:

  1. /* Этот текст многострочен и
  2. закомментирован */

Думаю это просто и понятно. Теперь переменные =)

Переменные в JavaScript

Мы уже знаем что такое переменные с этого раздела, но стоит поговорить о переменных еще раз, для тех кто забыл или вообще не знает.
Все мы учились в школе, вспомним простейший пример из математики - нахождение дискриминанта. Использовалась формула - D = b^2-4ac, все помним? Так вот, можно разделить данную формулу на две части - D и b^2-4ac, вторая часть(b^2-4ac) - это у нас действия, а буква D - это своего рода и есть переменная. В языках программирования происходит аналогично. То есть переменная это такая штука которая  хранит в себе какое-то значение, какую-то информацию. Идем дальше.
Теперь мы понимаем, что такое переменная, усложним задачу и зададимся вопросом, а что конкретно содержит в себе переменная, текст, число, множество чисел, символ, одну строку, что именно то? По сути мы можем сказать, да какая разница, есть че то и все, но нетс сЭр мы должны четко понимать что там. Отсюда существуют некие разделения переменных - типы данных. На примере Pascal мы уже знаем об этом.
Каждая переменная имеет свой тип данных. Об этом поговорим ниже.
Если в тетради мы просто пишем название переменной и формулу, то в языках программирования, в основном, прежде чем работать с переменной мы должны ее создать или объявить переменную. В некоторых языках во время объявления переменной требуется еще и указать ее тип данных, как например в том же Pascal, но мы изучаем JavaScript.
Теперь соберем все в кучу и разложим по полочкам.
Что мы имеем?
- для работы с информацией или других действий нужны переменные,
- переменную нужно объявить,
- указать тип данных.
В JavaScript переменные объявляются с помощью команды var:

  1. var
  2. переменная;

После команды var, пишем названия переменных, желательно каждая переменная с новой строки.
Усвоим правила, какими должны быть названия переменных.
Названия переменных в JavaScript могут содержать в себе латинские буквы, как большие так и маленькие, так же цифры и два символа - "$" и "_". Названия не должны начинаться с цифр. Названия чувствительны к регистру, то есть переменная HoMe и home это две различных переменных. Названия переменных в javascript должны быть осмысленными и желательно привыкайте писать их на чистом английском. То есть, переменная которая будет содержать в себе цвет дома, должна быть написана на английском и осмысленно, чтобы понимать что именно она содержит в себе цвет дома.
Например:
- cvetdoma, не английский, но осмысленно, но не совсем понятно что написано,
- colorauto, английский, но не осмысленно, и не совсем понятно что написано,
- colorhome, английский, осмысленно, не совсем понятно,
- colorHome, английский, осмысленно и понятно.
Я думаю вы усвоите эти не сложные правила.
Объявили переменную, а как же указать тип данных?
Если в Pascal мы четко указываем тип данных переменной:

  1. // Pascal
  2. var
  3. i: integer;
  4. s: string;

То в JavaScript, делать этого не нужно. JavaScript как бы сам определяет тип данных переменной как только мы присвоим ей какое-либо значение, а до тех пор она будет содержать в себе значение undefined. Но типы все таки есть и их нужно различать.
- Числовой - number,
- Строковый - string,
- Логический - boolean,
- Объект - Object.
Если в Pascal, к примеру, числа делятся на целочисленные и дробные, то здесь все в общей куче - числа, то же самое и строки, если там есть отдельно символьный тип данных и строковый, то здесь просто - строковый. Так же есть еще два типа данных, но о них будем говорить потом.
И так теперь давайте попробуем написать прошлый код с использованием переменных.
Для начала объявим две переменные. Когда объявляем больше одной переменной, то перечисляем их через запятую:

  1. var
  2. string,
  3. answer;

Две переменные string и answer, первая будет содержать в себе строку, вторая - ответ на математическое действие. В данном случае можно написать и так.

  1. var
  2. string, answer;

То есть вам ни кто не запрещать объявить их на одной строке, тут уже кому как удобно. Теперь давайте присвоим переменным значения. Значение переменным в JavaScript присваиваются через знак равно.

  1. var
  2. string,
  3. answer;
  4. string = 'Сколько будет 2+2?___2+2 = ';
  5. answer = 2+2;

Строку записываем в апострофы или кавычки. Теперь выведем ответ на экран, только воспользуемся сегодня другой командой, если в прошлом уроке мы использовали команду alert, сегодня попробуем вывести ответ в консоль с помощью команды console.log. Эта команда выводит информацию в консоль браузера, например в googleChrome нужно нажать правой кнопкой мыши по странице, выйдет контекстное меню, выбрать пункт "Исследовать элемент" и в открывшемся окне выбрать вкладку console, там и будет содержаться ответ.
Напишем команду

  1. var
  2. string,
  3. answer;
  4. string = 'Сколько будет 2+2?___2+2 = ';
  5. answer = 2+2;
  6. console.log();

В круглых скобках соединим две переменные:

  1. var
  2. string,
  3. answer;
  4. string = 'Сколько будет 2+2?___2+2 = ';
  5. answer = 2+2;
  6. console.log(string+answer);

Можете проверить результат. Теперь самые внимательные возможно задались вопросом, как это - складывать число и строку? С одной стороны странно, с другой стороны удобно =)
Да в JavaScript мы можем сложить строку с числом. Происходит это так, математическая операция выполнилась и получился ответ четыре, дальше число 4 мы прибавляем к строке, JavaScript сам преобразует число 4 в строку 4 и соединяет их. Удобно не правда ли =)

Заключение

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

Следующая статьяПредыдущая статья